imagecopyresampled werkt nog niet optimaal.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Team Lead PHP

Als Tech Lead zorg voor een glimlach op het gezicht van onze klanten door geweldige software af te leveren. Wat doe je als Team Lead PHP bij Coolblue? Als Team Lead PHP bouw en leid je een team dat uitblinkt in het leveren van hoogwaardige en kostenefficiënte software. Je ondersteunt teamleden bij het afbakenen van hun doelen en met de aanpak om ze te behalen. Als Tech Lead zorg voor een glimlach op het gezicht van onze klanten door geweldige software af te leveren en een effectief team op te bouwen. Ook Team Lead PHP worden bij Coolblue? Lees hieronder

Bekijk vacature »

React Developer

Samengevat: Zij bieden een breed scala aan hoogwaardige producten voor tuinvogels, egels, eekhoorns, vleermuizen en insecten. Ben jij een enthousiaste front-end developer? Heb jij ervaring als front-end developer? Vaste baan: Junior Magento Frontend Developer Dierenvoeding CMS 2.600 - 3.300 Junior Front End Developer Zij bieden een breed scala aan hoogwaardige producten voor tuinvogels, egels, eekhoorns, vleermuizen en insecten Zij werken voor MKB klanten. Deze werkgever heeft veel verschillende projecten. Houd jij van afwisseling? Dan zit je bij hun goed! Functie: Voor de vacature als Junior Front End Developer Venray Magento ga je het volgende doen: Taken En Verantwoordelijkheden: Creëer Magento

Bekijk vacature »

Freelance Applicatieontwikkelaar (ZZP)

Belastingdienst B/cao Startdatum inzet : 19 december 2022 Tijdelijke functie, met optie op vast Uren per week : 36 Standplaats (in overleg): Apeldoorn We zoeken een consultant/developer met ervaring in de ontwikkeling van back-end systemen. Als consultant heb je kennis en ervaring met de wijze waarop Open Formulieren is opgezet. Je bent een vraagbaak voor collega’s en deelt waar nodig je kennis. Je hebt ervaring met het werken in een open source omgeving. Je bent thuis in verschillende frameworks of je kunt je die snel eigen maken. Je hebt aantoonbaar ruime kennis van en ervaring met Python, Django, HCL Websphere

Bekijk vacature »

KPN - Freelance Fullstack (Python) Developer (ZZP)

As an experienced full stack (Python) Developer you, together with the team, are responsible for the innovation and development of the Digital Assistant. In our team we are developing conversational experiences through web/app and our voice channel based on conversational technology within the KPN ecosystem. Our digital assistant provides an intuitive natural language based experience to our customers in the consumer and business domain. We are constantly innovating new use cases and services. This technology impacts millions of KPN’s customers and users. Currently we are responsible for 3 different key components; 1. The conversational engine. A Python (Asyncio) backend that

Bekijk vacature »

Senior Frontend developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Bij DPA GEOS werken onze consultants als Frontend Developer in Agile teams bij onze klanten en zijn ze verantwoordelijk voor de grotere webapplicaties. Wil jij dit ook, want we zijn op zoek naar enthousiaste Frontend Developers om ons development team te versterken. Je draagt positief bij aan de teamgeest binnen een projectteam je kijkt verder dan je eigen rol. Eventueel begeleid je ook andere ontwikkelaars in het softwareontwikkelproces. Je gaat webapplicaties maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit

Bekijk vacature »

Freelance Frontend Developer (ZZP)

Belastingdienst B/cao Startdatum inzet : 19 december 2022 Tijdelijke functie, met optie op vast Uren per week : 36 Standplaats (in overleg) : Apeldoorn Op dit moment hebben wij frontend developers met een nieuwsgierige en pro actieve houding nodig die zich hoofdzakelijk richten op het helpen bij het bouwen van open formulieren. Deze formulieren worden gemaakt met verschillende producten. Wij werken met Bold (het Belastingdienst Design System), form.io, moderne frameworks en integratiemogelijkheden. Op het gebied van de overige tooling wordt je voor zover nodig ingewerkt. Van jou als frontend developer wordt verwacht dat je deze producten op de juiste manier

Bekijk vacature »

Front-end Developer

Due to the expansion of our technical applications team, we are looking for a front end developer. Lianne Snellenburg, Team Manager Technical Applications: “As a front end developer in my team you will work on progressive web applications (Angular, React, Vue or NodeJS) that are essential for the daily operation of the largest high-tech organizations in the Eindhoven region. You mainly come into contact with technical applications, in which setting up a software architecture also plays a role. I am looking for someone who can enjoy a beautiful graphic design and a beautiful code just as much. The opportunities at

Bekijk vacature »

Java Developer FlightInfo

De functie Organization We are an aviation company with an important social mission. With our airports, we create value for society and the economy. If you come on board at Royal Schiphol Group, you will enter a world that is always on the move. Your development also determines our development. We offer you all the space you need to keep moving and invest in your development and health. We base this on your own talents and qualities, because we urgently need them to achieve our ambitions: to become and remain Europe's Preferred Airport and a zero-waste airport in 2030! The

Bekijk vacature »

Software Developer Automotive

Visualize yourself working on cutting-edge projects that are shaping further the future of mobility. Working together with fellow engineers on solutions that will impact society and the way we travel. Making the world more sustainable, by contributing to a cleaner planet and simultaneously evolve your career in the automotive industry! Jan Plender, Team Manager Automotive Engineering: "As a member of our Automotive Engineering Team you will get a lot of opportunities to work on a wide variety of projects. Many of our engineers are currently involved in innovative electrification or Advanced Driver Assistence Systems (ADAS) development projects for some of

Bekijk vacature »

Senior Mendix Developer

Senior Mendix Developer Den Haag HBO/WO IT - software development Professional "Samen met je collega's impact maken door te werken aan logistieke Mendix applicaties voor kritieke processen van PostNL. Werk samen met ons om van PostNL een logistiek tech bedrijf te maken. Bij PostNL kom je terecht in een uitdagende omgeving waar je verder kan groeien en impact kan hebben. Samen brengen we Mendix binnen PostNL naar een hoger niveau." Wat ga je doen? Als Senior Mendix Developer kom je te werken in een scrum team binnen onze afdeling 'Pakketten en Logistiek'. Vanuit hier bouwen we alle logistieke software waarmee

Bekijk vacature »

Full Stack Java Developer

Functieomschrijving Als Senior Java Full Stack Developer binnen ons Client domein maak je directe impact op de dienstverlening van heel Randstad Groep Nederland. Je bent onderdeel van onze interne IT afdeling. Ondanks de domein naam dus geen eindeloze klantopdrachten, maar juist focus op de technische innovatie van onze eigen processen en dienstverlening. Om dit continu te kunnen optimaliseren zitten we middenin een grote transformatie en zijn daarom op zoek naar een tweetal vaste senior developers die ruimte en vrijheid zoeken om hun kennis en ervaring in te zetten. Wat bieden wij? Het nodige vertrouwen en de autonomie om je werk

Bekijk vacature »

C# .NET Developer

Dit ga je doen Je richt je op het doorontwikkelen en herstructureren van het platform; Je werkt in teamverband en zelfstandig aan uitdagende projecten voor verschillende klanten; Softwareontwikkeling middels C# .NET; Je staat in contact met verschillende opdrachtgevers om de klantwensen te bespreken en deze vervolgens te ontwikkelen; Verbeteren van bedrijfsprocessen; Implementaties. Hier ga je werken Als .NET 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

Bekijk vacature »

Senior ETL Developer

Functieomschrijving How does building an entirely cloudbased, open source data warehouse sound to you? As ETL developer at Randstad Groep Nederland IT that is exactly what you will be doing. As the world’s largest HR service provider, the amount of information that passes through our systems every day is vast. Using accurate data to inform our decision making processes and to guide us is therefore an integral part of our strategy. Our Data Insights team are helping us build an entirely new environment between our AWS datalake and Tableau reporting, drastically reducing the number of reports we need. Where our

Bekijk vacature »

Freelance Frontend Developer (ZZP)

Belastingdienst B/cao Startdatum inzet : 19 december 2022 Tijdelijke functie, met optie op vast Uren per week : 36 Standplaats (in overleg) : Apeldoorn Op dit moment hebben wij frontend developers met een nieuwsgierige en pro actieve houding nodig die zich hoofdzakelijk richten op het helpen bij het bouwen van open formulieren. Deze formulieren worden gemaakt met verschillende producten. Wij werken met Bold (het Belastingdienst Design System), form.io, moderne frameworks en integratiemogelijkheden. Op het gebied van de overige tooling wordt je voor zover nodig ingewerkt. Van jou als frontend developer wordt verwacht dat je deze producten op de juiste manier

Bekijk vacature »

Freelance Frontend Developer (ZZP)

Belastingdienst B/cao Startdatum inzet : 19 december 2022 Tijdelijke functie, met optie op vast Uren per week : 36 Standplaats (in overleg) : Apeldoorn Op dit moment hebben wij frontend developers met een nieuwsgierige en pro actieve houding nodig die zich hoofdzakelijk richten op het helpen bij het bouwen van open formulieren. Deze formulieren worden gemaakt met verschillende producten. Wij werken met Bold (het Belastingdienst Design System), form.io, moderne frameworks en integratiemogelijkheden. Op het gebied van de overige tooling wordt je voor zover nodig ingewerkt. Van jou als frontend developer wordt verwacht dat je deze producten op de juiste manier

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

03/12/2022 23:47:01
 
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.