imagecopyresampled werkt nog niet optimaal.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP backend ontwikkelaar met Symfony kennis gezoch

Bedrijfsomschrijving Dit bedrijf maakt voor haar klanten aansprekende en slimme webapplicaties voor haar klanten. De mensen gaan hier informeel en sympathiek met elkaar om. De eigenaar komt vanuit een andere branche en heeft inmiddels alweer een aantal jaar gelden dit bedrijf overgenomen. Ontwikkelaars krijgen hier heel veel vrijheid om zelf invulling te geven aan hun manier van werken. Inmiddels is er weer ruimte voor een extra medewerker vanwege de groei van de organisatie. Groeien is overigens geen doel van dit bedrijf. Wel het 'blij' maken van klanten en mooie technische PHP applicaties ontwikkelen. Die houding zorgt dat ze veel aanbevelingen

Bekijk vacature »

Oracle Ontwikkelaar @ Regio Den Haag

2021-08-18 iSense Oracle Ontwikkelaar Wil jij een bijdrage leveren aan het verduurzamen van Nederland? Vind je het gaaf om je eigen applicaties te bouwen? Lees dan snel verder! ISAC49836 Nieuw Organisatie Als ervaren DevOps Engineer zal je verantwoordelijk zijn voor de ontwikkeling van nieuwe webapplicaties door middel van Oracle APEX en PL/SQL. Je houdt je bezig met het realiseren van mooie en innovatieve oplossingen, voortstormend uit de requirements die je hebt achterhaald bij diverse stakeholders. Naast web development ben je tevens verantwoordelijk voor het onderhouden een groot aantal complexe applicaties, het analyseren van problemen en hierbij met bruikbare oplossingen komen.

Bekijk vacature »

Sr Fullstack Developer PHP / MySQL

Wie wordt jouw werkgever?: Wij houden ons bezig met maatwerk (web) applicaties in diverse sectoren. Heb jij een uitstekende kennis van programmeren? Heb je ervaring met PHP/MySQL? Vaste baan: Sr Fullstack Developer PHP MySQL 3.200 - 4.800 Senior Fullstack Developer Wij zijn gespecialiseerd in het schrijven van code. Bij ons geen marketingstrategen of SEO-specialisten. Wij focussen ons volledig op één ding: het bedenken en ontwikkelen van slimme en innovatieve software en webapplicaties. Daarmee bespaar jij geld, moeite en veel tijd. Wij zijn een veelzijdige organisatie. Je werkt voor onze eigen IT organisatie. We werken met moderne technologie en staan open

Bekijk vacature »

Software Ontwikkelaar ERP / Testen Software

Over het bedrijf: Wij zijn een leverancier van software. Heb jij affiniteit met informatica? Heb jij ervaring als ERP software developer? Vaste baan: Software Ontwikkelaar ERP Softwarebranche 2.800 - 4.200 Software Developer Wij zijn een grote leverancier van software voor vastgoedbedrijven (commercieel en sociaal), outsourcing en consultancy. Wij zijn vertegenwoordigd in meerdere Europese landen. Wij werken voor grote klanten. We doen omvangrijke projecten die we bij ons op kantoor realiseren (geen detachering). Wij werken met state-of-the-art technologie en lopen daarin voorop. Wil jij de diepte in en veel leren, dan is deze baan geknipt voor jou. Jouw werkzaamheden als Software

Bekijk vacature »

Business Intelligence Developer

Role: Business Intelligence Developer (Part time – 2/3 days a week) Location: The Netherlands (Fully Remote) Salary: €50,000 - €80,000 My client, one of the largest retail chains in the Netherlands with 200+ stores is seeking a talented BI Developer to join their team on a part time basis This role is a unique opportunity to maintain the environment and work within an exciting, fast growing organisation. Benefits include: Competitive pay scales Extremely generous holiday entitlement & Bonus Further salary progression based on performance. flexible working! Pension plan Main Responsibilities: ETL (Extract, Transform and Load) Maintaining the environment Creation of

Bekijk vacature »

Senior Java Developer @ Groningen

2021-07-19 iSense Senior Java Developer Wil jij als Senior Java Developer dagelijks meedenken over diverse architectuur oplossingen? Ga jij graag met je collega’s op zoek naar de beste oplossing? Lees dan snel verder! ISRI47150 Nieuw Organisatie Als Senior Java Developer kom je te werken bij een internationaal gerenommeerd onderzoeksinstituut. Dagelijks is dit instituut verantwoordelijk voor de juiste samenwerking, toegankelijkheid en communicatie voor circa 9000 interne gebruikers. In een team van elf ontwikkelaars ben je als Senior Java Developer verantwoordelijk voor het ontwikkelen van functionele ontwerpen naar technische oplossingen. Deze projecten bestaan o.a. projecten zoals het implementeren van Elastic Search en

Bekijk vacature »

Product Owner

Vind jij het leuk om met Techniek bezig te zijn en liggen jouw interesse in de digitale wereld? Dan zijn wij op zoek naar jou! Wat ga je doen? Kennis vastleggen in tooling, zodat het goed toegepast kan worden. Je bent als Product Owner verantwoordelijk voor de software producten, die de collega's en klanten ondersteunen bij het opstellen van materiaallijsten. Je verzamelt input vanuit de gebruikers en verwerkt deze op agile wijze in de producten. Hiervoor werk je nauw samen met de verkooporganisatie en w-engineers voor de ontwikkeling. Daarbij stel je userstory's op voor het software team, beoordeel je het

Bekijk vacature »

PHP Developer

Bedrijfsomschrijving In Den Haag zoek ik voor onze klant naar een ervaren PHP programmeur die goed OOP kan programmeren. De uitdagende functie is bij een snelgroeiend bedrijf dat in de educatieve branche actief is. Ze hebben een grote webshop staan dat wereldwijd wordt gebruikt door bedrijven en consumenten. Deze informele organisatie biedt jou goede arbeidsvoorwaarden en de ruimte voor een lease-auto. Functieomschrijving Binnen dit bedrijf kom je terecht in een team van 5 developers. Het bedrijf telt in totaal 32 man. Het platform is voornamelijk van scratch opgebouwd aan de hand van Zend framework. Je zal voornamelijk allround werkzaamheden gaan

Bekijk vacature »

Developer / Low-code @ Regio Lelystad

2021-08-16 iSense Developer Low-code Vind jij het leuk om als Ontwikkelaar te werken aan een eindproduct voor verschillende grote klanten in Nederland en voel jij je prettig binnen een familiebedrijf? Lees dan snel verder en solliciteer! ISK50314 Nieuw Organisatie Als Developer kom je te werken in de regio van Lelystad bij een organisatie die met toonaangevende klanten uit heel Nederland samen werkt. De producten en diensten van de organisatie bereiken miljoenen Nederlanders. Hierbij komt een grote hoeveelheid informatie kijken en deze moet discreet en veilig verwerkt worden. De processen die hierbij horen worden door het IT team vormgegeven. De organisatie

Bekijk vacature »

Full Stack Developer HBO / HBO

Over het bedrijf: Wij maken en optimaliseren websites Ben jij een ervaren Full Stack Developer? Heb jij affiniteit met PHP? Vaste baan: Full Stack Developer HBO 3.300 - 4.500 Full Stack Developer Wij zijn een Fullservice Internetbureau. Wij maken Websites, Apps en Portals, en zijn actief op gebied van E-commerce. We hebben ook veel aandacht voor websiteoptimalisatie (SEA en SEO), en systeemintegratie, en maken datakoppelingen met veel verschillende systemen. Bij ons werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om de inzet van technologie. Wij staan open voor

Bekijk vacature »

Medior .NET Developer I eLearning en ePublishing

Bedrijfsomschrijving Kom werken bij een leuk softwarehuis, thuis in de educatieve markt! Ze maken software-oplossingen op maat, afgestemd op specifieke bedrijfsprocessen van de klant. De klant doet waar ze goed in zijn, dit bedrijf zorgt er voor dat zij de juiste toolset hebben. Het bedrijf heeft als missie om onderwijs inspirerend, leuk en interactief te maken. Het bedrijf kent enkel en alleen software producten welke aangeboden worden in zowel binnen- als buitenland. Met inmiddels een team van ongeveer 25 hoogopgeleide mensen zijn ze in staat complexe processen begrijpelijk te maken en te vertalen in goed werkende software oplossingen. Naast een

Bekijk vacature »

Business Intelligence ontwikkelaar (Microsoft tool

Bedrijfsomschrijving De organisatie is ruim 80 man groot en is aanbieder van een zeer groot en divers aanbod van consumentenproducten in Nederland. Oorspronkelijk is het een familiebedrijf die is opgericht in 2001. De IT afdeling is ruim 15 man groot. Binnen de organisatie heerst een erg open en informele werksfeer. Functieomschrijving Door toenemende vraag vanuit de business naar management informatie is de organisatie momenteel opzoek ter uitbreiding naar een ervaren Microsoft Business Intelligence ontwikkelaar. In deze functie ben je nauw betrokken binnen het gehele BI traject; van informatie analyse, datawarehouse ontwikkeling/beheer tot de bouw van rapportages. Het betreft een zeer

Bekijk vacature »

Backend Developer ICT / SQL

Over de werkgever: Wij schrijven software voor e-commerce en marketing doelen. Werk jij als backend developer? Heb jij ervaring met asp.net en .net core? Vaste baan: Backend Developer ICT B2B 2.600 - 3.900 Backend Developer Wij zijn marktleider op het gebied van IT Solutions. Wij zijn een veelzijdige organisatie. Je werkt voor onze eigen IT organisatie. We werken met moderne technologie en staan open voor innovatie. Wat houdt de functie precies in?: Voor de vacature als Backend Developer Weesp B2B ga je het volgende doen: Je werkt aan het verbeteren, implementeren, integreren en en ontwikkelen van onze op cloud gebaseerde

Bekijk vacature »

(junior) Product Manager / Applicatiebeheerder

Wij zoeken een ervaren zelfstandige, accurate en analytische medewerker in de rol van technisch specialist kan doorgroeien naar de functie van product manager /applicatiebeheerder. Je bent in ons team verantwoordelijk voor het beheer en de (door)ontwikkeling van onze applicatie en productieomgeving voor onze nationale en internationale opdrachtgevers. Een medewerker die waar nodig ondersteunt bij andere activiteiten zoals training van gebruikers en het ondersteunen van klanten. Wie zijn wij Onze organisatie bestaat uit een juridisch adviesbureau (Juris) en een B2B-softwareleverancier (Visuall). Wij zijn actief in binnen- en buitenland en werken met name voor grote publieke en private organisaties. Wij geloven dat

Bekijk vacature »

Junior .Net ontwikkelaars gezocht, groei door tot

Bedrijfsomschrijving Ga aan de slag bij het leukste softwarebedrijf in Twente! Dit bedrijf ontwikkelt hoogstaande software die zowel binnen Nederland als buiten Nederland gebruikt wordt. De toepassingen worden door klanten gebruikt die veelal in de toeristische sector werken. Een mooi voorbeeld hiervan is een systeem dat gebruikt wordt om de goede doorstroom van grote groepen bezoekers te monitoren. Ook wordt hun innovatieve software gebruikt om kleinere ondernemers binnen de reisbranche te ondersteunen binnen hun administratie en documentatie. De organisatie bestaat al meer dan 20 jaar en er werken op dit moment zo’n 25 ontzettend sterke developers. De verwachting is dat

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

25/09/2021 07:41:02
 
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.