imagecopyresampled werkt nog niet optimaal.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mendix Developer

Wat wij bieden een contract voor onbepaalde tijd en goede primaire arbeidsvoorwaarden; een flexibele werkomgeving waar je tijd en plaats onafhankelijk kan werken; een ruim mobiliteitsbudget voor een keuze in een leaseauto of voor je eigen vervoer; een flex benefit budget en collectieve regelingen (o.a. thuiswerkfaciliteiten, korting op je zorgverzekering en bedrijfsfitness); een keuze in een laptop en je ontvangt een telefoonvoucher t.w.v. €290,-; een betrokken community dat gericht is op jouw interesses, teambuilding, gaming en evenementen; onbeperkt opleidingsbudget om je technisch en persoonlijk te blijven ontwikkelen. Wat jij meeneemt je hebt een (technische) HBO of WO-diploma behaald; je bent

Bekijk vacature »

Senior developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Java Developer

Functie Wat ga je doen als Java Developer? Samen met jou gaan we één project vinden die het best jou past, leerzaam zijn en bedragen aan jouw wensen en ontwikkelingen. In een jaar tijd word je klaar gestoomd tot een zelfstandige Java Ontwikkelaar, doormiddel van een masterclasses, intensieve en interactieve trainingen van top coaches, die klaar staan om jouw kennis te vergroten en dit ook te realiseren in praktijk. Samen met jouw coach ga je een persoonlijke leerplan opzetten om jou doelen te behalen. Start nu jouw carrière. Eisen Wat wordt er van jou verwacht? • Een afgeronde HBO Informatica

Bekijk vacature »

Back End Developer Medior

Collega’s maken het verschil. Daarom is het leuker werken bij Bending The Rules. Want naast dat we serieuze software vraagstukken oplossen, zijn wij niet het typische IT bedrijf. Naast programmeurs zijn we ook bevlogen BBQ chefs, bierbrouwers, competitieve gewichtheffers en houden we van een festivalletje. Kortom, we zoeken een leuke collega die ook nog eens echt goed is in zijn werk. Ben jij die persoon. ANDERE VOORDELEN VAN WERKEN BIJ BENDING THE RULES We starten altijd met een contract van 7 maanden. Waren deze succesvol? Dan belonen wij jou met een vast contract én een loonsverhoging of een lease auto

Bekijk vacature »

Robotprogrammeur

Bedrijfsomschrijving: Locatie: regio Kampen Dit internationale bedrijf is één van Europa’s meest toonaangevende machinebouwers. Ze ontwikkelen en produceren hoogwaardige robotsystemen volledig in eigen beheer. Deze robotsystemen worden geïntegreerd in diverse hoogwaardige productieprocessen in verschillende branches. De onvergelijkbare systemen die deze organisatie ontwikkelt en produceert en de flexibiliteit van de machineconcepten zijn binnen deze markt erg opvallende kenmerken die zijn ontwikkeld op basis van jarenlange ervaring en expertise. Ze kenmerken zich door innovatie, kwaliteit en ervaring zodat de klanten altijd voorop blijven lopen in de sector. Als Software Engineer Robotica ben je verantwoordelijk voor het optimaliseren van het robotprogramma om tot

Bekijk vacature »

Junior stack developer

Vacaturebeschrijving: Python, PHP en C++. 3 termen die bij veel mensen direct voor vraagtekens in de ogen zorgen, maar jij weet precies waar ik het over heb! Gelukkig maar, anders werd het een moeilijk verhaal voor deze junior stack developer vacature. Hier krijg je de kans om het vak van A tot Z onder de knie te krijgen. Beginnend bij A natuurlijk. Wat je precies gaat doen? Van het opzetten van low codes tot het uitwerken van volledige workflows. Al je uitwerkingen komen in goed overleg met de klant tot stand. Voelt het als starter soms alsof je zoekt naar

Bekijk vacature »

Java developer (remote)

Functie Wat ga je doen als Java Developer? Jij als Java ontwikkelaar komt te werken in 1 van onze SCRUM teams. Momenteel werken er zo’n 30 ontwikkelaars binnen onze organisatie waarbij jij de brug slaat tussen het bouwen van verschillende functionaliteiten binnen onze applicaties en deze vervolgens te integreren in onze centrale hub. Je start je dag om 9 uur met een stand up en dan pak je jouw taken op voor de dag. Hieronder een aantal taken die jij zal uitvoeren: – Het bedenken en uitbouwen van features binnen de verschillende applicaties – Onderhouden van CI/CD pipelines – Bezighouden

Bekijk vacature »

Uitdagende PHP job voor developer die wil doorgroe

Bedrijfsomschrijving Bij mijn klant ontwikkelen ze web-applicaties en er heerst hier een dynamische en energieke sfeer waarbij de collega's elke dag het beste uit elkaar proberen te halen. Het niveau is hier hoog en elke dag proberen collega's van elkaar te leren en kennis met elkaar te delen. Ze behoren in de regio tot een uitstekende werkgever voor PHP ontwikkelaars. Ik zoek voor mijn klant een ervaren ontwikkelaar met goede PHP kennis en je kunt hier op termijn doorgroeien naar een rol als teamlead. We zoeken dus iemand met ambitie die graag door wil groeien in de organisatie! Ze ontwikkelen

Bekijk vacature »

Developer ERP

"Door digitalisering creëren wij een verantwoord woon- en werkklimaat, nu en in de toekomst - voor iedereen." Wil jij software maken die onze klanten het werk gemakkelijker maakt en wil jij jezelf continu blijven ontwikkelen? Haal jij energie uit het werken op internationaal niveau? Zoek jij jouw uitdaging binnen een professionele organisatie met een informele sfeer? Dan zijn wij op zoek naar jou! Ben jij ook op zoek naar Aareon? Developer ERP Ons aanbod Wat we jou bieden als developer binnen Aareon hebben we hieronder voor jou op een rijtje gezet. We bieden jou allereerst uitdaging en fijne collega’s. Daarnaast

Bekijk vacature »

Senior developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Java Ontwikkelaar

In het kort Als ervaren Java ontwikkelaar binnen onze business unit Machine & Systems werk je aan complexe projecten voor de machine- en apparatenbouw, die vaak een flinke bedrijf kritische impact hebben. Je doorgrondt dan ook feilloos de consequenties van beslissingen voor de architectuur. En je bent verantwoordelijk voor de vertaling van de architectuur naar een technisch ontwerp. In een team werk je dit verder uit naar software-implementaties. Dit vind je leuk om te doen Requirements in Java-projecten opstellen en analyseren Werken met bestaande systemen en je eigen invulling daaraan geven Samen met de architect een Java-omgeving ontwikkelen die voldoet

Bekijk vacature »

Senior PHP developer

Functie Als Senior PHP developer heb je een sterke mening over de architectuur van projecten en de processen binnen het team. Je bent de sparringpartner voor je Team Lead. Ook ondersteun je met jouw kennis de minder ervaren developers in jouw team. Ze werken regelmatig aan projecten vanaf scratch en dit geeft ruimte om voor nieuwe technieken te kiezen. Naast het ontwikkelen van software ben je continue bezig om ook jezelf te ontwikkelen. Ze werken met o.a.: PHP, Laravel, Doctrine, PHP Unit, Behat, React, TypeScript, (My)SQL, Postgress, Redis, ElasticSearch, Docker, Nginx, GIT flow, JIRA, AWS. Eisen • HBO werk- en

Bekijk vacature »

Front End Developer React / NextJS Websites Scrum

Samengevat: Wil jij werken als Front End Developer? Deze werkgever is een digitaal bureau. Heb jij ervaring als Front End Developer. Vaste baan: Front End Developer React Scrum 3.000 - 4.200 Front End Developer Deze werkgever is een digitaal bureau. We zijn blauwvingers én we slaan graag onze vleugels uit om mooie reizen te maken. En nee, we zijn geen standaard bureau. We zijn betrokken bouwers. We bouwen graag aan websites, marketing campagnes en aan goede relaties met onze klanten. Maar we bouwen ook aan jouw ontwikkeling, de ontwikkeling van het team en het bedrijf. En dat doen we net

Bekijk vacature »

Senior Java + Azure Developer / Designer

Senior Java + Azure Developer / Designer Amstelveen, North Holland 6-12+ Months Contract Hybrid model option We are looking for an experienced Senior Java + Azure Developer / Designer to join one of Europe’s largest and fastest-growing clients in a progressive and innovative international team on a 6-12+ months contract in Amstelveen. Hybrid mode is optional. Senior Java + Azure Developer / Designer desired Skills: Total IT experience > 5 years, Strong Java Development Knowledge, Good knowledge about CICD Tools, Jenkins, Sonar, Nexus, Knowledge of Azure DevOps is preferred, Someone who has an excellent focus on IT Software Quality, Good

Bekijk vacature »

Senior Java Ontwikkelaar

Dit ga je doen Werken aan uiteenlopende interne projecten voor grote (internationale) organisaties; Ontwikkelen van diverse (web)applicaties en platformen met technieken als Java, Azure en ASP.NET; Complexe vraagstukken tackelen met jouw expertise en ervaring; Waar nodig help jij je collega's om samen tot de juiste oplossing te komen. Hier ga je werken Als Java Developer kom je te werken bij een internationale organisatie in regio Amsterdam die zich richt op procesoptimalisatie door middel van zeer complexe IT oplossingen. Dit doen zij op het allerhoogste niveau met vestigingen over heel de wereld en met een groot aantal aansprekende, maatschappelijk betrokken klanten.

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

07/10/2022 20:29:14
 
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.