imagecopyresampled werkt nog niet optimaal.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Software developer (Python)

Functie Je komt te werken in het IT-team bestaande uit de Lead developer en 4 (medior/senior) developers. Gezamenlijk werken jullie aan de verbetering en uitbreiding van de software. Binnen het development team is er veel vrijheid en zelfstandigheid, zonder dat ze hiermee afdoen aan de kwaliteit. Zo hebben ze elke ochtend een korte stand-up (10:00 uur) en houden ze zo nu en dan pair-programming sessies. Ook is er een hele professionele ontwikkelcyclus waarbij code altijd eerst door een collega wordt getest voordat het naar deployement gaat. Je hebt in je werk oog voor kwaliteit, risico’s en het klantbelang. Communicatie met

Bekijk vacature »

.NET Developer

Functie omschrijving Ervaren .NET Developer gezocht! Wij zoeken een ervaren .NET developer die aan de slag gaat voor een softwarebedrijf in de regio Rhenen. In deze rol ben jij zowel zelfstandig als in teamverband verantwoordelijk voor het ontwikkelen en verbeteren van bestaande producten. Daarnaast houdt jij je bezig met de nieuwbouw van websites, webapplicaties en mobiele applicaties die zowel intern als extern gebruikt worden. Je werkt hierbij nauw samen met andere developer, productmanagers en product specialisten om mooie producten te creëren. Bedrijfsprofiel Waar kom je te werken? Je komt te werken voor snelgroeiende softwareleverancier en allround dienstverlener. Klanten van deze

Bekijk vacature »

Medior C# Developer

You'll build modern applications for Coolblue's back office. We have a lot of friends, and they crave well-structured data and user-friendly, task-focused applications. How do I become a Medior C# Developer at Coolblue? You regularly participate in brainstorm sessions about user experience, data, and task flow with the UX Designer, Product Owner, and Data Scientists in your team. Besides that you will create disconnected, highly congruent, and testable code that can easily be maintained and is future-proof. Want to become C# Developer at Coolblue? Read below if the job suits you. You enjoy doing this Working with various types of

Bekijk vacature »

Traineeship Full Stack .NET Developer

Dit ga je doen Start op 7 augustus bij de Experis Academy en ontwikkel jezelf tot een gewilde Full Stack .NET Developer. Maar hoe ziet het traineeship eruit en wat kun je verwachten? Periode 1 De eerste 3 maanden volg je fulltime, vanuit huis, een op maat gemaakte training in teamverband. Je leert belangrijke theorie en krijgt kennis van de benodigde vaardigheden en competenties die nodig zijn om de IT-arbeidsmarkt te betreden. Zowel zelfstandig als in teamverband voer je praktijkopdrachten op het gebied van front- en backend development uit. Wat er per week op het programma staat kun je hier

Bekijk vacature »

.Net Front-end Ontwikkelaar

Wij zoeken een .Net Front-end Ontwikkelaar! Omschrijving Kun jij snel schakelen en ben je stressbestendig? Dan zoeken wij jou! Als .Net Front-end Ontwikkelaar help je mee aan de webapplicatie die over de hele wereld door allerlei bedrijven wordt gebruikt. Je werkt daarnaast mee aan nieuwe en verbeterde functionaliteiten en helpt met het oplossen van bugs. Over de opdrachtgever Je komt te werken in een ambitieus team dat zich blijft ontwikkelen. Dit is alle informatie die we nu kunnen delen over de werkplek. Als jij de .Net Front-end Ontwikkelaar bent voor deze job, vertellen we je snel nóg meer. Eisen Heb

Bekijk vacature »

Senior Fullstack developer wanted! (C#, Java, Angu

Functie Under the guidance of 3 account managers, one of whom will be your point of contact within your expertise, you will start working for various clients. He or she will help you find a suitable and challenging assignment. Naturally, they will take your situation, experience and (technical) ambitions into account. The assignments last one to two years on average. This allows you to really commit to a project and make an impact as a consultant. Besides the assignment, you will regularly meet your colleagues from the IT department to share knowledge or discuss new trends, for example. Master classes

Bekijk vacature »

Database Developer

Functieomschrijving Heb jij ongeveer 3 jaar ervaring als Database Developer met MS SQL of een vergelijkbare database? Wil jij werken voor een ambitieuze werkgever in regio Tilburg waar jij volledig de mogelijkheid krijgt jezelf te ontwikkelen? Lees dan snel verder! Hoe ziet jouw takenpakket eruit? Je gaat projecten gedurende het hele proces begeleiden. Je sluit aan bij afspraken met klanten om hun processen helder te krijgen. Vervolgens voer jij het project uit en zorgt dat dit zo goed mogelijk verloopt; Je werkt aan nieuwe softwareoplossingen die de logistieke processen verbeteren of vernieuwen; Je houdt je bezig met het ontwikkelen van

Bekijk vacature »

Medior/Senior Python developer

Functie Jij als Senior Python developer hebt al ruime ervaring opgedaan. Bedrijven komen bij de organisatie om technische vraagstukken op te lossen. Jij als specialist bent dus de representatie van deze kwaliteit. Je zult de keuze krijgen tussen lange of korte projecten waarin je komt te werken in multidisciplinaire teams. Projecten die je gaat uitvoeren zijn zeer uitlopend. Zodoende kun je aan de ene kant kiezen voor een greenfield project en stroom je bij een ander project midden in een migratietraject in. Voor de ene klant ontwikkel je ene nieuwe portal en voor het andere project duik je veel meer

Bekijk vacature »

Junior .NET developer

Functie Jij hebt natuurlijk net jouw Bachelor op zak en gaat nu voor het eerst aan de slag bij een werkgever als junior .NET ontwikkelaar. Waarschijnlijk lijkt het jou spannend om ineens aan de slag te gaan bij klanten in de consultancy. Maak je niet druk, jij komt hier terecht in een warm bad en wordt totaal niet in het diepe gegooid. Zodra jij hier begint wordt jij gekoppeld aan een persoonlijke manager met een persoonlijk ontwikkelplan. Jij krijgt een scala aan trainingen, denk aan trainingen ten behoeve van het opdoen van zelf kennis en gedragscompetenties, maar ook trainingen voor

Bekijk vacature »

Medior/senior front end developer

Functie Vanwege de groei binnen het bedrijf zijn ze op zoek naar een Technische front end developer. Momenteel hun front end back end team gescheiden aan het werk. Hier willen ze verandering in krijgen. Omdat ook veel interne applicaties ontwikkeld worden zoeken ze iemand die hen kan helpen om de interne applicaties te voorzien van de juiste Vue.js componenten. Zodoende willen ze de interactie tussen front end en back end versoepelen en de volgende stap binnen het platform gaan zetten. Deze componenten die jij ontwikkeld zullen in elk project gebruikt worden. Het back end team bestaat momenteel uit 8 ontwikkelaars

Bekijk vacature »

Traineeship Full Stack .NET Developer

Dit ga je doen Start op 7 augustus 2023 bij de Experis Academy en ontwikkel jezelf tot een gewilde Full Stack .NET Developer. Maar hoe ziet het traineeship eruit en wat kun je verwachten? Periode 1 De eerste 3 maanden volg je fulltime, vanuit huis, een op maat gemaakte training in teamverband. Je leert belangrijke theorie en krijgt kennis van de benodigde vaardigheden en competenties die nodig zijn om de IT-arbeidsmarkt te betreden. Zowel zelfstandig als in teamverband voer je praktijkopdrachten op het gebied van front- en backend development uit. Wat er per week op het programma staat kun je

Bekijk vacature »

Lead Front-end developer

Functie Hun huidige applicatie worden ontwikkeld in o.a. React, Redux, TypeScript. Ze werken graag met de nieuwste technieken en tooling en zoeken ook developers die hier proactief op zoek naar gaan. Als senior/lead developer ben je een kartrekker in het team. Naast het meedenken over bijvoorbeeld de architectuur of toepassing van nieuwe technieken krijg je ook veel tijd om de meer junior (front-end) developers te begeleiden. Zo kun je bijvoorbeeld 1 dag in de week met 2 collega’s bezig zijn om samen met hen te kijken naar hun ontwikkeling, doelstellingen en uiteraard de gewenste begeleiding hierin. Hiernaast sta je als

Bekijk vacature »

Low Code Developer - Consultant

Functie omschrijving Wil jij fungeren als een spin in het web en samenwerken met klanten? Voor een leuke en interessante opdrachtgever in omgeving Leiden zijn wij op zoek naar een Low Code developer die zich bezig gaat houden met het optimaliseren van bedrijfsprocessen bij klanten en het leiden van projecten. Ben jij toe aan een nieuwe uitdaging en heb jij verstand van datamodellering en NO CODE Platformen? Lees dan snel verder! Bij deze rol horen de volgende werkzaamheden: Je gaat geen code kloppen maar bedenken hoe applicaties eruit moet komen te zien. Je gaat werken met een non code platform,

Bekijk vacature »

(Junior) PHP Ontwikkelaar bij een retail bedrijf i

Bedrijfsomschrijving Ben jij een ervaren PHP ontwikkelaar met een passie voor retail en ICT? Wil jij werken in een team dat zich bezighoudt met het ontwikkelen van uitdagende applicaties voor een groot retailbedrijf in Delft? Dan zijn zij op zoek naar jou! Functieomschrijving Als PHP Ontwikkelaar werk je in een team aan de ontwikkeling van applicaties die door de gehele organisatie worden gebruikt. Je bent verantwoordelijk voor het ontwikkelen, testen en implementeren van deze applicaties. Je werkt hierbij nauw samen met andere ontwikkelaars, projectmanagers en stakeholders binnen de organisatie. Je taken bestaan onder andere uit: Ontwikkelen van nieuwe functionaliteiten en

Bekijk vacature »

Front-end developer (Medior/Senior)

Functie Het front-end team bestaat momenteel uit 4 collega’s en is hard aan het groeien! Samen leveren jullie een essentiële bijdrage aan de applicaties die ze voor hun klanten realiseren. Je werkt in het front-end team samen met de back-end teams en product owners om te zorgen dat de applicaties een fijne gebruikerservaring opleveren. Jouw expertise zorgt ervoor dat de juiste keuzes gemaakt worden qua techniek en ontwerp, van back-end tot aan gebruiker. In samenspraak met je team bepalen jullie de beste keuze voor techniek. Ook is er altijd ruimte om nieuwe technieken te ontdekken. Eisen • Je hebt gedegen

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

24/12/2024 19:46:58
 
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.