imagecopyresampled werkt nog niet optimaal.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Back-end Developer

Functieomschrijving Heb jij kort geleden jouw HBO ICT diploma in ontvangst mogen nemen? Of ben je toe aan een nieuwe stap? Voor een softwarebedrijf in regio Oosterhout zijn wij op zoek naar een back-end developer met kennis of ervaring met C# en SQL. Je draagt bij aan de implementatie van aanpassingen, verbeteringen en aanvullingen in de C# based applicaties; Je test de software en ontwikkelt deze door; Je brengt de aanpassingssuggesties van klanten in kaart, om ze vervolgens te analyseren en daarna te concluderen of de aanpassing een verbetering is; Je houdt je bezig met het ontwikkelen van nieuwe functionaliteiten;

Bekijk vacature »

Software Programmeur

Functie omschrijving Voor een informele club in omgeving Delft zijn wij op zoek naar versterking. Ben jij op zoek naar een nieuwe uitdaging als Software Programmeur lees dan snel verder! Als ontwikkelaar kom je terecht op een afdeling van 6 medewerkers. Werkzaamheden Programmeur Je bent bezig met het ontwikkelen van software en webapplicaties. Je kunt technische klussen uitvoeren op locatie. Je onderhoudt contact met de projectleider om er zeker van te zijn dat een project goed verloopt. Je zult klanten ondersteunen. Verder zul je technische ontwerpen en gebruikersdocumentaties schrijven en deze onderhouden. Er wordt voornamelijk gewerkt met PHP, Java en

Bekijk vacature »

Fullstack Developer

Functieomschrijving Voor een erkende werkgever in regio Etten-Leur zijn wij op zoek naar een Fullstack Developer met PHP/Laravel ervaring. Je gaat aan de slag met het bouwen van maatwerk software voor klanten die actief zijn in een specifieke markt. Als fullstack developer ben je samen met een enthousiast team van 7 collega’s verantwoordelijk voor de ontwikkeling, beheer en innovatie van informatiesystemen voor klanten in een specifieke branche. Verder ondersteun je complexe uitdagingen van klanten. Je brengt hun wensen in kaart en vertaalt deze door naar maatwerk software. Ervaring met Laravel is een must. Om de klant zo goed mogelijk te

Bekijk vacature »

Back end Node.js developer

Functie Het ontwikkelteam bestaat momenteel uit 5 (back-end) Developers, 2 systeembeheerders, 1 DevOps engineer, 1 Tech Lead en 2 Scrum Masters. Samen wordt er doorontwikkeld aan twee SaaS-platformen die in een hoog tempo doorontwikkeld moeten worden. Omdat innovatie een belangrijk speerpunt binnen de organisatie is, wordt er ook continu naar snellere en slimmere oplossingen te bedenken en realiseren. Als Back-end Developer hou jij je dagelijks bezig met vraagstukken zoals: API-development, high volume datastromen, het ontwikkelen van Bots aan de hand van A.I. Daarnaast denk en werk jij mee aan de onlineapplicaties voor klanten. Er wordt zelfstandig en in teamverband gewerkt

Bekijk vacature »

PHP Developer

Functieomschrijving Wij zijn op zoek naar een PHP Developer met Laravel ervaring! Voor een groeiende werkgever in regio Breda zijn wij op zoek naar een medior PHP developer met Laravel ervaring. Je gaat aan de slag met het ontwikkelen van maatwerk software voor klanten in een specifieke markt. Als PHP developer ben je samen met een gemotiveerd team van 6 collega’s verantwoordelijk voor de ontwikkeling, beheer en het innoveren van informatiesystemen voor klanten in een specifieke branche. Als software developer ondersteun je complexe uitdagingen van klanten. Je brengt hun wensen in kaart en vertaalt deze door naar maatwerk software. Om

Bekijk vacature »

Senior Front-End Developer

As a Senior Front-end Developer you maintain the balance between creativity and functionality for our webshop, and you coach your fellow developers. How do I become a Senior Front-End Developer at Coolblue? As a Front-end Developer you work on the user-friendliness of our webshop for millions of customers. You enjoy working with the UX Designer to pick up stories. You get energy from coming up with creative solutions and are happy to present this within the team. You are also proud of your work and welcome all feedback. Would you also like to become a Senior Front-End Developer at Coolblue?

Bekijk vacature »

3D BIM Add-on Developer

Als 3D BIM add- on ontwikkelaar bij KUBUS ontwikkel je add-ons (BCF Managers genaamd) voor de toonaangevende building information modeling (BIM) programma's Revit, Navisworks, Archicad, AutoCAD en Tekla Structures. BCF Managers maken gegevensoverdracht mogelijk tussen BIM-software en BIMcollab. Je werkt zowel aan de front- als aan de back-end. Als softwarebedrijf bevindt KUBUS zich in een unieke positie. We bouwen aan onze eigen producten die wereldwijd door tienduizenden gebruikers worden gebruikt. Ons bedrijf heeft precies de juiste grootte: groot genoeg om echt impact te maken in de markt, maar klein genoeg om als individuele ontwikkelaar invloed uit te kunnen oefenen en

Bekijk vacature »

.NET developer

Functie Als developer heb jij de keuze om aan te sluiten bij het team (13 developers) die op locatie projectmatig bij klanten werkt. Wanneer jij liever intern bij de werkgever werkt is er ook alle ruimte voor jou in het interne team (8 developers) van dit bedrijf. Je werkt samen aan verschillende projecten bij of voor de klant. Het project wordt aangeleverd door sales aan de project manager. Die maakt samen met de Resourcer een planning en op basis daarvan wordt uit het development team een “projectgroep” opgesteld. Hoeveel en welke projecten jij wilt oppakken gebeurt geheel in samenspraak met

Bekijk vacature »

C# .NET Backend Developer HBO Javascript

Samengevat: Deze werkgever is een professionele speler op gebied van IT en E-Commerce. Wil jij werken voor een e-commerce platform? Heb je ervaring met C#, Javascript en Scrum? Vaste baan: C# .NET Developer Backend E-Commerce 3.400 - 4.500 Backend Developer Wij ontwikkelen software voor E-Commerce toepassingen. Ons eigen Content Management systeem biedt een integrale oplossing met diverse ERP software. Onze systemen zijn vaak complex en omvangrijk en draaien bij grote organisaties. Maar ook kleine ondernemingen hebben steeds vaker behoefte aan een vlekkeloos werkende E-Commerce oplossing. Zij bieden een uitdagende werkomgeving met gezellige collega's. Je krijgt veel vrijheid en er is

Bekijk vacature »

Mendix Consultant / Developer

Dit ga je doen Het in kaart brengen en analyseren van de functionele wensen van de klant rondom Mendix applicaties; Het fungeren als sparringpartner voor de (interne) klanten; Het opstellen van requirements en het vertalen hiervan naar technische mogelijkheden; Het opstellen van user stories; Het bouwen van de Mendix applicaties in samenwerking met jouw team of zelfstandig; Het testen van op te leveren software en het zorg dragen voor de implementatie; Trainen van gebruikers in het gebruik van de applicatie; Werken in een Agile omgeving. Hier ga je werken De organisatie begeeft zich in de retail branche en focust zich

Bekijk vacature »

Frontend Developer - Leeuwarden

Frontend Developer – Leeuwarden Als Frontend Developer bouw jij mee aan het onderwijs van de toekomst! In een scrum team werken met jonge en enthousiaste collega’s, moderne technieken, ruimte voor eigen ontwikkeling en op een proactieve wijze kunnen meewerken aan innovatie binnen het onderwijs. Magister is het state-of-the-art softwarepakket dat scholen in het voortgezet onderwijs op alle fronten ontzorgt. Van leerlingenadministratie tot het ondersteunen van individuele leerlijnen, van toegang tot digitaal lesmateriaal tot het plannen van het lesrooster. In de Magister app bedient Magister ruim 2,5 miljoen gebruikers waarvan, dagelijks meer dan 600.000 unieke. Hiermee is Magister de absolute marktleider

Bekijk vacature »

Software Developer

Dit ga je doen Je bent verantwoordelijk voor de warehouse applicatie die een integratie heeft met de PLC laag; Je ontwikkelt in C#/.Net; Je werkt mee aan de migratie naar .NET 6; Je bent verantwoordelijk voor het ontwikkelen van interfaces en het visualiseren van componenten; Je denkt mee over het design voor business oplossingen; Je bent verantwoordelijk voor het testen van de gebouwde oplossing. Hier ga je werken Voor een internationale organisatie in de transport zijn wij momenteel op zoek naar een Software Developer. Zij zijn wereldwijd de grootste speler en lopen voorop met het automatiseren van alle processen van

Bekijk vacature »

Front end developer

Functie Jij als ervaren Front end developer bent een expert het gebied van Javascript en React. Je wordt onderdeel van een multidisciplinair team bestaande uit een PO, twee Front end developers, een DevOps/Back end developer, een UX/UI designer en een projectmanager. Verder is er iemand verantwoordelijk voor de HR en is de algemeen directeur nauw betrokken bij alle projecten. Dagelijks hou jij je bezig met de verschillende projecten die zijn opgenomen in de sprint. Daarnaast denk je mee over mogelijke oplossingen om de behoefte van de klant op de beste manier in te vullen. Verder spar jij intern met collega’s

Bekijk vacature »

SQL Database developer

Functie omschrijving Wil jij meewerken aan het creëren van slimme software om magazijnen als een geoliede machine te laten lopen? Wij zoeken een zorgvuldig persoon, iemand die niet snel de hand omdraait voor complexe algoritmes. Denk jij dat jij de SQL ontwikkelaar bent die wij zoeken? Lees snel verder en wie weet zitten we binnenkort samen aan tafel! Jouw werkzaamheden zullen er als volgt uitzien: Je houdt je bezig met het ontwerpen en ontwikkelen van MS SQL server databases, dit doe je met T-SQL als programmeer laag. Je gaat aan high-end software oplossingen werken, dit doe je voor de optimalisatie

Bekijk vacature »

Front-end developer E-Commere

Functie E-commerce is een ‘’snelle’’ wereld. Om hierin continu voorop te blijven omarmen ze in een vroeg stadium nieuwe technieken. Een webshop is nooit af en kan altijd beter, sneller en efficiënter. Tegelijkertijd hebben ze vanaf hun oprichting altijd vastgehouden aan kwaliteit boven snelheid, en dit loont. Als front-end developer heb je een adviserende rol en sta je aan het eindpunt van alles wat met designs te maken heeft. Je overlegt met klanten en collega’s, en zet je in om ideeen om te zetten tot unieke concepten. Je bent het aanspreekpunt voor de klant en bewaakt tevens de planning. Eisen

Bekijk vacature »
Martijn Zant

Martijn Zant

17/12/2013 21:20:10
Quote Anchor link
Goedenavond Iedereen,

Ik heb een vraagje over mij php script. Ik wil op mijn website de mogelijkheid aanbieden dat bezoekers hun profielfoto kunnen uploaden. Hierbij wil ik dat bezoekers hun foto kunnen snijden uit een (te) grote foto.
Het volgende javascript gebruik ik om de snijvlakte te bepalen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function getSizes(im,obj)
    {
        var x_axis = obj.x1;
        var x2_axis = obj.x2;
        var y_axis = obj.y1;
        var y2_axis = obj.y2;
        var thumb_width = obj.width;
        var thumb_height = obj.height;
        alert(x_axis);
        alert(x2_axis);
        alert(y_axis);
        alert(y2_axis);
        alert(thumb_width);
        alert(thumb_height);
        if(thumb_width > 0)
            {
                if(confirm("Do you want to save image..!"))
                    {
                        $.ajax({
                            type:"GET",
                            url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
                            cache:false,
                            success:function(rsponse)
                            
                                {
                                    //$("#photoimg").hide();
                                    $("#thumbs").html("");
                                    $("#thumbs").html("<img src='uploads/"+rsponse+"' style='max-width:450px'/>");
                                    
                                }
                        });
                    }
            }
        else
            alert("Please select portion..!");
    }

$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        aspectRatio: '2.25:1',
        onSelectEnd: getSizes
    });
});


Nu wil ik dit gaan verwerken en doe dit in het volgende php script
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php

require_once 'db.php';
$nummer_project = 1;

$basic_width = $_SESSION['basic_width'];
$basic_height = $_SESSION['basic_height'];

$t_width = 450;    //  thumbnail width
$t_height = (($t_width/$basic_width)*$basic_height);    //  thumbnail height

$ratio_x = $t_width / $basic_width;
$ratio_y = $t_height / $basic_height;

$new_name = "header".$nummer_project.".jpg"; // Thumbnail image name

$path = "uploads/";
if(isset($_GET['t']) and $_GET['t'] == "ajax")
    {

        extract($_GET);
        $snijden_vanaf_x = ceil($x1 * $ratio_x);
        $snijden_vanaf_y = ceil($y1 * $ratio_y);
        $snijlengte_x = ceil($w * $ratio_x);
        $snijlengte_y = ceil($h * $ratio_y);
                
        $nimg = imagecreatetruecolor($snijlengte_x,$snijlengte_y);
        $im_src = imagecreatefromjpeg($path.$img);
        imagecopyresampled($nimg,$im_src,0,0,$snijden_vanaf_x,$snijden_vanaf_y,980,435,$snijlengte_x,$snijlengte_y);
        
        
        imagejpeg($nimg,$path.$new_name,100);
        echo $new_name;
        exit;
    }

    
    ?>

Nu krijg ik wel de kleine foto alleen deze is helemaal zwart. Weet iemand waar het dan fout (kan) gaan?

Als er meer toelichting nodig is hoor ik dit graag!

Alvast bedankt!

Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.[/modedit]
Gewijzigd op 18/12/2013 11:57:36 door Martijn Zant
 
PHP hulp

PHP hulp

29/03/2024 07:54:05
 
Kris Peeters

Kris Peeters

18/12/2013 11:17:24
Quote Anchor link
lijn 17: $path = "wuploads/";

lijn 28: $("#thumbs").html("<img src='uploads/"+rsponse+"' style='max-width:450px'/>");

Ik veronderstel dat je die wuploads op lijn 17 moet veranderen naar uploads

-----

De error die je klrijgt, is dat imagecreatefromjpeg het pad $path.$img niet kan vinden.
Gewijzigd op 18/12/2013 11:23:40 door Kris Peeters
 
Martijn Zant

Martijn Zant

18/12/2013 11:57:10
Quote Anchor link
Bedankt voor je reactie.

Echter is die w een klein foutje dat door het weghalen van de hele link komt.

Oorspronkelijk staat de w er niet.

Wat zou verder de fout kunnen zijn dat ik een zwarte afbeelding krijg?
 
Kris Peeters

Kris Peeters

18/12/2013 12:17:25
Quote Anchor link
Bij mij komt meestal geen zwarte afbeelding meer.

Maar het lijkt me dat de berekening niet klopt.
Wanneer de berekening getallen levert die buiten de grenzen van de image komen, ontstaat de fout.

$snijden_vanaf_x en $snijden_vanaf_y hebben niets te maken met de ratio. Die gegevens zijn het punt (x, y) van de source. Dus gewoon de top en left waar de gebruiker de cursor zet als eerste punt.

Die variabelen moet je anders noemen. Zorg dat bij elke variabele duidelijk is of het eindresultaat een source of destination waarde is. Nu is het verwarrend.

----
- Vertel eens wat die vaste waarden zijn. 450; 980; 435
- $_SESSION['basic_width'] en $_SESSION['basic_height'] worden bij het uploaden gevuld zeker? Wat voor waarden zijn dat?
Vergeet niet dat bovenaan ajax_image.php session_start() moet staan.
elk verzoek moet beginnen met session_start(); ook ajax verzoeken
Gewijzigd op 18/12/2013 12:20:23 door Kris Peeters
 
Martijn Zant

Martijn Zant

18/12/2013 12:48:51
Quote Anchor link
Hey Kris,

Wederom bedankt voor je reactie. Even ter toelichting. Dat ratio zit er in vanwege het volgende proces wat doorlopen wordt:
1) User upload foto
2) De foto wordt verkleint weergegeven met een maximale breedte van 450 px.
3) De user kan in deze foto snijden en verzenden
4) het gesneden gedeelte moet naar ratio worden gesneden uit de oorspronkelijke foto.
5) de nieuwe gesneden foto is nu te zien. (deze foto zal later worden gebruikt als header foto met een breedtje en hoogte van 980 x 435

Zelf heb ik de berekeningen bekeken en denk ik dat het goed is maar ik zal hier nog eens naar kijken.

Eventuele tips over het hierboven beschreven proces zijn welkom natuurlijk .
Gewijzigd op 18/12/2013 13:01:37 door Martijn Zant
 
Kris Peeters

Kris Peeters

18/12/2013 13:37:03
Quote Anchor link
980 x 435; okay, dan moet je dus zeker maken dat de source image groter is dan dat.
Daar moet je al op controleren.
En dan nog moet zien dat de gebruiker een selectie maakt die groter is dan dat.

----

Wacht even. Je verkleint eerst naar 450px; daarna wil je er iets uit snijden dat veel groter is dan dat.
Dat is niet de bedoeling.
Gewijzigd op 18/12/2013 13:54:00 door Kris Peeters
 
Martijn Zant

Martijn Zant

18/12/2013 14:04:23
Quote Anchor link
De foto zelf zal niet verkleint worden opgeslagen maar gewoon op ware grootte.
Vervolgens bij het snijden zal de afbeelding verkleint worden weergegeven.
Vandaar dat ik het ratio bereken hoeveel de afbeelding verkleint is weergegeven. Vervolgens gebruik ik dit ratio om de uiteindelijk snijgrootte te berekenen.

Ik hoop dat dit kan?
 
Kris Peeters

Kris Peeters

18/12/2013 14:19:05
Quote Anchor link
Hier is mijn versie.

Extra bestanden: "jquery.min.js", "imgareaselect-default.css", "imgAreaSelect.js"
(controleer of die juist staan, op lijn 7, 8, 9 van mijn code)

De image bevindt zich ook al in de map uploads, bij mij met de naam "a75oeGx_700b_v1.jpg" (geplukt van 9gag, zie de volledige src van de <img>).
Zorg dat de image (die jij wil gebruiken) overeenkomt met de gegevens in de <img> en in de <input>.


Alles wat niet belangrijk of nodig is voor mij, heb ik weggelaten. Eventueel heb jij die wel nog nodig.

index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
session_start();
?>

<input id="image_name" value="a75oeGx_700b_v1.jpg"><br>
<img id="photo" src="http://d24w6bsrhbeh9d.cloudfront.net/photo/a75oeGx_700b_v1.jpg">
<span id="thumbs"></span>
<link rel="stylesheet" type="text/css" href="imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="imgAreaSelect.js"></script>
<script>
function getSizes(im, obj) {
  var x_axis = obj.x1;
  var x2_axis = obj.x2;
  var y_axis = obj.y1;
  var y2_axis = obj.y2;
  var thumb_width = obj.width;
  var thumb_height = obj.height;
  if(thumb_width > 0)
    {
      if(1)  // confirm("Do you want to save image..!")
        {
          $.ajax({
            type:"GET",
            url:"ajax_image.php?t=ajax",
            data: {  // object notatie van data die we mee sturen
              img: $("#image_name").val(),
              w: thumb_width,
              h: thumb_height,
              x1: x_axis,
              y1: y_axis
            },
            cache:false,
            success:function(rsponse) {
                //$("#photoimg").hide();
                $("#thumbs").html("");
                $("#thumbs").html("<img src='uploads/" + rsponse + "' style='max-width:450px'/>");
              }
          });
        }
    }
  else
    alert("Please select portion..!");
}
$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        aspectRatio: '2.25:1',
        onSelectEnd: getSizes
    });
});
</script>


ajax_image.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php
session_start();          // niet vergeten!  elk verzoek moet beginnen met session_start(); ook ajax verzoeken
if(isset($_GET['t']) and $_GET['t'] == "ajax") {
  // options:
  $path = "uploads/";
  $dest_w = 980;
  $dest_h = 435;
  $dest_filename = 'header1.jpg';
  // source gegevens lezen
  $source = $path . $_GET['img'];
  list($src_w, $src_h, $type, $attr) = getimagesize($source);
  $crop = array(
    'x' => $_GET['x1'],
    'y' => $_GET['y1'],
    'w' => $_GET['w'],
    'h' => $_GET['h']
  );

  // we forceren de destination width en height naar vaste waarden
  
  $nimg       = imagecreatetruecolor($dest_w, $dest_h);
  $im_src     = imagecreatefromjpeg($source);
  $okay       = imagecopyresampled(
    $nimg,              // resource $dst_image
    $im_src,            // resource $src_image
    0,                  // int $dst_x
    0,                  // int $dst_y
    $crop['x'],         // int $src_x
    $crop['y'],         // int $src_y
    $dest_w,            // int $dst_w
    $dest_h,            // int $dst_h
    $crop['w'],         // int $src_w
    $crop['h']          // int $src_h
  );
  imagejpeg($nimg, $path.$dest_filename, 100);
  echo $dest_filename;
  exit;
}

?>


Moraal:
Je hebt die ratio-berekeningen niet nodig.
De destination width en height worden geforceerd in imagecopyresampled();
de source gegevens moeten al helemaal geen ration meekrijgen bij het lezen van de gegevens. imagecopyresampled rekent dat zelf juist uit.

Wat die sessie betreft ... daar weet ik niet echt wat je van plan bent, en wat het in dit stuk code betekent.
Ik doe er niets mee.
Maar het punt is: als je sessie-gegevens in de Ajax call nodig hebt, moet je de Ajax call ook beginnen met session_start().

Was dit de bedoeling?
Gewijzigd op 18/12/2013 14:52:38 door Kris Peeters
 
Martijn Zant

Martijn Zant

19/12/2013 11:18:21
Quote Anchor link
Bedankt voor je uitleg! Ik ga hier vanavond even naar kijken.

Thanks!
 
Kris Peeters

Kris Peeters

19/12/2013 11:24:25
Quote Anchor link
Nu ik er aan denk,

Die ratio voor de source kan eventueel wel nodig zijn in de berekening, indien de image (waar de gebruiker in moet snijden) verkleind in beeld komt.
Dus als je met css #photo verkleint.

Nu ja, dat lukt je wel.
 
Martijn Zant

Martijn Zant

20/12/2013 15:42:21
Quote Anchor link
Goedemiddag,

Ik heb het geprobeerd alleen ik krijg nog steeds een zwarte afbeelding als resultaat.
Ik mis volgens mij echt iets heel kleins...

Maar wat?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
session_start();

$nummer_project = 5;

if(isset($_GET['t']) and $_GET['t'] == "ajax")
{
    
    // Options
    $path = "uploads/";
    $dest_w = 980;
    $dest_h = 435;
    
    $dest_filename = "header".$nummer_project.".jpg"; // Thumbnail image name
    
    // Source gegevens lezen

    $source = $path . $_GET['img'];
    list($src_w, $src_h, $type, $attr) = getimagesize($source);
    $t_width = 450;    //  thumbnail width
    $t_height = (($t_width/$basic_width)*$basic_height);    //  thumbnail height
    $ratio_x = $t_width / $src_w;
    $ratio_y = $t_height / $src_h;
    
    $crop = array(
        'x' => ($_GET['x1'] * $ratio_x),
        'y' => ($_GET['y1'] * $ratio_y),
        'w' => ($_GET['w'] * $ratio_x),
        'h' => ($_GET['h'] * $ratio_y)
    );

    // we forceren de destination width en height naar vaste waarden            
    $nimg = imagecreatetruecolor($dest_w,$dest_y);
    $im_src = imagecreatefromjpeg($source);
    $oke = imagecopyresampled(
        $nimg,
        $im_src,
        0,
        0,
        $crop['x'],
        $crop['y'],
        $dest_w,
        $dest_h,
        $crop['w'],
        $crop['h']
    );

    
    imagejpeg($nimg,$path.$dest_filename,100);
    echo $dest_filename;
    exit;
    }

    
    ?>
 
Kris Peeters

Kris Peeters

20/12/2013 15:48:42
Quote Anchor link
Toon ook eens de HTML die de gebruiker te zien krijgt.

Eventueel een copy/paste van de paginabron of zo.

Met ten minste
- alle elementen die jQuery aanspreekt
- met de css van de image waar de gebruiker in snijdt.
Gewijzigd op 20/12/2013 15:57:10 door Kris Peeters
 
Martijn Zant

Martijn Zant

20/12/2013 16:12:55
Quote Anchor link
Hierbij de code van het html gedeelte:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../../_css/cms.css" media="screen" />
<title>test</title>
</head>
<body>
<!--B.o.f. navTop-->
<div id="navTop">
    <div class="wrap">
    Welkom <span style="color:#1958bd"></span>
    </div>

</div>
<!--E.o.f. navTop-->

<div class="wrap" style="margin-top:10px;">
    <div id="adminMenu">
    <nav id="main-menu">
    <ul class="nav-bar">
          <li class="nav-button-home"><a style="padding-left:50px" href="/">Dashboard</a></li>
          <li class="nav-button-project"><a style="padding-left:45px" href="#">Projecten</a></li>
          <li class="nav-button-statistics"><a style="padding-left:40px;" href="#">Mijn statistieken</a></li>
    </ul>
</nav>
    </div>
<div id="mainContent">
    <div id="pageName">
      <div id="iconHome" class="addProject">Project toevoegen</div></div>
<div class="hr"></div>
<link rel="stylesheet" type="text/css" href="imgareaselect-default.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function getSizes(im,obj)
    {
        var x_axis = obj.x1;
        var x2_axis = obj.x2;
        var y_axis = obj.y1;
        var y2_axis = obj.y2;
        var thumb_width = obj.width;
        var thumb_height = obj.height;
        
        if(thumb_width > 0)
            {
                if(1)//confirm("Do you want to save image..!"))
                    {
                        $.ajax({
                            type:"GET",
                            url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
                            cache:false,
                            success:function(rsponse)
                            
                                {
                                    //$("#photoimg").hide();
                                    $("#thumbs").html("");
                                    $("#thumbs").html("<img src='uploads/"+rsponse+"' style='max-width:450px'/>");
                                    
                                }
                        });
                    }
            }
        else
            alert("Please select portion..!");
    }

$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        aspectRatio: '2.25:1',
        onSelectEnd: getSizes
    });
});
</script>


<form id="cropimage" method="POST" name="header_submit" enctype="multipart/form-data">
<table width="940" border="1" cellspacing="0" cellpadding="0" class="regTable">
  <tr>
    <td colspan="2"><h2><span>1</span>:Voeg een header foto toe.</h2></td>
  </tr>
  <tr>
    <td><input type="file" name="photoimg" id="photoimg" />
    <input type="hidden" name="image_name" id="image_name" value="" /> * </br>
        </td>
    <td><input class="save"type="submit" name="header_submit" value="Header Foto Uploaden"/>&nbsp;</td>
  </tr>
  <tr>

            
  
<div style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div id="thumbs" style="padding:5px;"></div>
<div style="width:600px">
  

  
  
  </tr>
 </table>
<div class="hr"></div>
</form>






<form action="" method="POST" name="project_toevoegen" enctype="multipart/form-data">



En hier de css van default snijden
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*
 * imgAreaSelect default style
 */

.imgareaselect-border1 {
    background: url(border-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
    background: url(border-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
    background: url(border-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
    background: url(border-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.imgareaselect-handle {
    background-color: #fff;
    border: solid 1px #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.imgareaselect-outer {
    background-color: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.imgareaselect-selection {  
}
Gewijzigd op 20/12/2013 16:14:56 door Martijn Zant
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.