Snijd afbeelding bij tot vierkant
Hallo,
Ik ben een webshop aan het maken. Ik wil dat de beheerder een afbeelding kan kiezen en dat deze geuploaded wordt. Maar in het design gebruik ik overal vierkanten met een witte achtergrond.
Alle afbeeldingen die geuploaded worden hebben al een witte achtergrond, maar zijn JPG-formaat. Bijvoorbeeld de afmetingen zijn 200x100 pixels. Dan wil ik dat hij links en rechts 50px witruimte toevoegt, zodat de afbeelding 200x200px is.
Heeft iemand een manier om dit te doen?
Bedankt!
Jeroen
Ik ben een webshop aan het maken. Ik wil dat de beheerder een afbeelding kan kiezen en dat deze geuploaded wordt. Maar in het design gebruik ik overal vierkanten met een witte achtergrond.
Alle afbeeldingen die geuploaded worden hebben al een witte achtergrond, maar zijn JPG-formaat. Bijvoorbeeld de afmetingen zijn 200x100 pixels. Dan wil ik dat hij links en rechts 50px witruimte toevoegt, zodat de afbeelding 200x200px is.
Heeft iemand een manier om dit te doen?
Bedankt!
Jeroen
Dit is wat je zoekt denk ik
https://www.php.net/manual/en/function.imagecopy.php
Maak een lege image. laad een 2° image van je foto
en copy een deel naar de 1°
gebruik eventueel ook
https://www.php.net/manual/en/function.imagecrop.php
Alle image functies hier
https://www.php.net/manual/en/ref.image.php
Jan
https://www.php.net/manual/en/function.imagecopy.php
Maak een lege image. laad een 2° image van je foto
en copy een deel naar de 1°
gebruik eventueel ook
https://www.php.net/manual/en/function.imagecrop.php
Alle image functies hier
https://www.php.net/manual/en/ref.image.php
Jan
Hallo Jan, Bedankt voor je antwoord! Ik ben nog niet bij dat systeem, maar met deze info moet het zometeen wel lukken! Nogmaals bedankt!
Advies is om de images te cachen zodat de bewerkingen niet elke keer gedaan hoeven te worden. Ik kwam uit op zoiets:
Code (php)
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
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
<?php
function cacheImage($srcFile, $targetDir, $width, $height)
{
// Laad orignele afbeelding van uit het bestand en maak er een truecolor afbeelding van
$src = imagecreatefromjpeg($srcFile);
imagepalettetotruecolor($src);
// Voor het resultaat maken we een nieuwe afbeelding aan in het geheugen
$dest = imagecreatetruecolor($width, $height);
// vul de achtergrond op met een witte kleur
$white = imagecolorallocate($src, 255, 255, 255);
imagefill($dest, 0, 0, $white);
// bepaal de verhouding tussen breedte en hoogte
$r = imagesx($src) / imagesy($src);
// maak een onderscheid tussen landscape en portret afbeeldingen
if(imagesx($src) > imagesy($src)) {
// landscape
$w = $width;
$h = $height / $r;
// plak de afbeelding op de juiste positie en in de juiste afmetingen in de nieuwe afbeelding
imagecopyresampled($dest, $src, 0, ($height-$h)/2, 0, 0, $w, $h, imagesx($src), imagesy($src));
} else {
// portret
$w = $width * $r;
$h = $height;
// plak de afbeelding op de juiste positie en in de juiste afmetingen in de nieuwe afbeelding
imagecopyresampled($dest, $src, ($width-$w)/2, 0, 0, 0, $w, $h, imagesx($src), imagesy($src));
}
// indien de cache directory niet bestaat maak hem aan
@mkdir($targetDir, 0777, true);
// Sla de nieuwe afbeelding op.
imagejpeg($dest, $targetDir . '/' . $srcFile);
// even netjes het geheugen vrij maken
imagedestroy($dest);
imagedestroy($src);
}
cacheImage('original.jpg', 'cache/shop', 200, 200);
?>
<!DOCTYPE html>
<html>
<head>
<title>Imagesample</title>
<meta charset="UTF-8">
</head>
<body>
<img src="cache/shop/original.jpg" style="margin: 25px; border: 2px solid blue;">
</body>
</html>
function cacheImage($srcFile, $targetDir, $width, $height)
{
// Laad orignele afbeelding van uit het bestand en maak er een truecolor afbeelding van
$src = imagecreatefromjpeg($srcFile);
imagepalettetotruecolor($src);
// Voor het resultaat maken we een nieuwe afbeelding aan in het geheugen
$dest = imagecreatetruecolor($width, $height);
// vul de achtergrond op met een witte kleur
$white = imagecolorallocate($src, 255, 255, 255);
imagefill($dest, 0, 0, $white);
// bepaal de verhouding tussen breedte en hoogte
$r = imagesx($src) / imagesy($src);
// maak een onderscheid tussen landscape en portret afbeeldingen
if(imagesx($src) > imagesy($src)) {
// landscape
$w = $width;
$h = $height / $r;
// plak de afbeelding op de juiste positie en in de juiste afmetingen in de nieuwe afbeelding
imagecopyresampled($dest, $src, 0, ($height-$h)/2, 0, 0, $w, $h, imagesx($src), imagesy($src));
} else {
// portret
$w = $width * $r;
$h = $height;
// plak de afbeelding op de juiste positie en in de juiste afmetingen in de nieuwe afbeelding
imagecopyresampled($dest, $src, ($width-$w)/2, 0, 0, 0, $w, $h, imagesx($src), imagesy($src));
}
// indien de cache directory niet bestaat maak hem aan
@mkdir($targetDir, 0777, true);
// Sla de nieuwe afbeelding op.
imagejpeg($dest, $targetDir . '/' . $srcFile);
// even netjes het geheugen vrij maken
imagedestroy($dest);
imagedestroy($src);
}
cacheImage('original.jpg', 'cache/shop', 200, 200);
?>
<!DOCTYPE html>
<html>
<head>
<title>Imagesample</title>
<meta charset="UTF-8">
</head>
<body>
<img src="cache/shop/original.jpg" style="margin: 25px; border: 2px solid blue;">
</body>
</html>
Gewijzigd op 02/04/2020 22:47:31 door Frank Nietbelangrijk
Hallo Frank, dus als ik het goed begrijp, wordt een ingevoerde afbeelding kleiner gemaakt en wordt er een vierkant van gemaakt. Vervolgens wordt hij geuploaded/verplaatst naar de aangewezen dir. Bedankt voor je antwoord, trouwens.
Jeroen,
Eigenlijk wordt er een nieuwe afbeelding gemaakt van (in dit voorbeeld) 200 x 200 pixels. Dan wordt deze met de kleur wit gevuld en vervolgens wordt er een andere afbeelding op de nieuwe afbeelding geplakt en dat zo dat er of onder en boven of links en rechts een witruimte ontstaat. Als laatste wordt de afbeelding die tot dusver enkel een object in het geheugen van de computer was opgeslagen in een directory naar keuze.
Al bij al een redelijk dure operatie die je het liefst één keer doet en hem dan gewoon opslaat voor hergebruik. Enkel wanneer je deze operatie uitvoert is aan jou. Je kunt dan denken aan eenmalig direct wanneer een afbeelding geüpload wordt door een medewerker of misschien wel wanneer de benodigde afbeelding ontbreekt.
Eigenlijk wordt er een nieuwe afbeelding gemaakt van (in dit voorbeeld) 200 x 200 pixels. Dan wordt deze met de kleur wit gevuld en vervolgens wordt er een andere afbeelding op de nieuwe afbeelding geplakt en dat zo dat er of onder en boven of links en rechts een witruimte ontstaat. Als laatste wordt de afbeelding die tot dusver enkel een object in het geheugen van de computer was opgeslagen in een directory naar keuze.
Al bij al een redelijk dure operatie die je het liefst één keer doet en hem dan gewoon opslaat voor hergebruik. Enkel wanneer je deze operatie uitvoert is aan jou. Je kunt dan denken aan eenmalig direct wanneer een afbeelding geüpload wordt door een medewerker of misschien wel wanneer de benodigde afbeelding ontbreekt.
Gewijzigd op 02/04/2020 22:50:42 door Frank Nietbelangrijk
ook nog misschien handig is imagecolortransparent
Als in Franks's voorbeeld wit dan gebruik je wit als transparant en zie je dat niet als jouw sites achtergrond een ander kleur heeft. Dit terwijl de breedte/hoogte van 200 toch blijft
Als in Franks's voorbeeld wit dan gebruik je wit als transparant en zie je dat niet als jouw sites achtergrond een ander kleur heeft. Dit terwijl de breedte/hoogte van 200 toch blijft
Hallo Frank, bedankt voor je antwoord. Nu begrijp ik de functie beter!
Toevoeging op 03/04/2020 08:39:35:
Hallo Jan, Fijn dat je meedenkt, maar een witte achtergrond is prima. Toch bedankt!
Toevoeging op 03/04/2020 08:39:35:
Hallo Jan, Fijn dat je meedenkt, maar een witte achtergrond is prima. Toch bedankt!
Hallo Frank,
Ik heb de functie geprobeerd, maar hij geeft een foutmelding.
Dit is de code die ik geprobeerd heb:
En dit is de foutmelding die ik heb gekregen:
Warning: imagecreatefromjpeg(): gd-jpeg: JPEG library reports unrecoverable error: in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 627 Warning: imagecreatefromjpeg(): 'chiffon.jpeg' is not a valid JPEG file in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 627 Warning: imagepalettetotruecolor() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 628 Warning: imagecolorallocate() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 634 Warning: imagesx() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 638 Warning: imagesy() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 638 Warning: Division by zero in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 638 Warning: imagesx() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 641 Warning: imagesy() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 641 Warning: imagesx() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 652 Warning: imagesy() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 652 Warning: imagecopyresampled() expects parameter 2 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 652 Warning: imagedestroy() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 663
Snap jij wat er fout is gegaan?
Ik heb de functie geprobeerd, maar hij geeft een foutmelding.
Dit is de code die ik geprobeerd heb:
Code (php)
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
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
<?php
function get_date($sql_date) {
$time = strtotime($sql_date);
$dag = date("j", $time);
$jaar = date("Y", $time);
$maanden = array('januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december');
$maand = $maanden[(date("m", $time) - 1)];
$date = $dag.' '.$maand.' '.$jaar;
return $date;
}
function cacheImage($srcFile, $targetDir, $width, $height) {
// Laad orignele afbeelding van uit het bestand en maak er een truecolor afbeelding van
$src = imagecreatefromjpeg($srcFile);
imagepalettetotruecolor($src);
// Voor het resultaat maken we een nieuwe afbeelding aan in het geheugen
$dest = imagecreatetruecolor($width, $height);
// vul de achtergrond op met een witte kleur
$white = imagecolorallocate($src, 255, 255, 255);
imagefill($dest, 0, 0, $white);
// bepaal de verhouding tussen breedte en hoogte
$r = imagesx($src) / imagesy($src);
// maak een onderscheid tussen landscape en portret afbeeldingen
if(imagesx($src) > imagesy($src)) {
// landscape
$w = $width;
$h = $height / $r;
// plak de afbeelding op de juiste positie en in de juiste afmetingen in de nieuwe afbeelding
imagecopyresampled($dest, $src, 0, ($height-$h)/2, 0, 0, $w, $h, imagesx($src), imagesy($src));
} else {
// portret
$w = $width * $r;
$h = $height;
// plak de afbeelding op de juiste positie en in de juiste afmetingen in de nieuwe afbeelding
imagecopyresampled($dest, $src, ($width-$w)/2, 0, 0, 0, $w, $h, imagesx($src), imagesy($src));
}
// indien de cache directory niet bestaat maak hem aan
@mkdir($targetDir, 0777, true);
// Sla de nieuwe afbeelding op.
imagejpeg($dest, $targetDir . '/' . $srcFile);
// even netjes het geheugen vrij maken
imagedestroy($dest);
imagedestroy($src);
}
cacheImage('chiffon.jpeg', 'nieuw', 200, 200);
?>
function get_date($sql_date) {
$time = strtotime($sql_date);
$dag = date("j", $time);
$jaar = date("Y", $time);
$maanden = array('januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december');
$maand = $maanden[(date("m", $time) - 1)];
$date = $dag.' '.$maand.' '.$jaar;
return $date;
}
function cacheImage($srcFile, $targetDir, $width, $height) {
// Laad orignele afbeelding van uit het bestand en maak er een truecolor afbeelding van
$src = imagecreatefromjpeg($srcFile);
imagepalettetotruecolor($src);
// Voor het resultaat maken we een nieuwe afbeelding aan in het geheugen
$dest = imagecreatetruecolor($width, $height);
// vul de achtergrond op met een witte kleur
$white = imagecolorallocate($src, 255, 255, 255);
imagefill($dest, 0, 0, $white);
// bepaal de verhouding tussen breedte en hoogte
$r = imagesx($src) / imagesy($src);
// maak een onderscheid tussen landscape en portret afbeeldingen
if(imagesx($src) > imagesy($src)) {
// landscape
$w = $width;
$h = $height / $r;
// plak de afbeelding op de juiste positie en in de juiste afmetingen in de nieuwe afbeelding
imagecopyresampled($dest, $src, 0, ($height-$h)/2, 0, 0, $w, $h, imagesx($src), imagesy($src));
} else {
// portret
$w = $width * $r;
$h = $height;
// plak de afbeelding op de juiste positie en in de juiste afmetingen in de nieuwe afbeelding
imagecopyresampled($dest, $src, ($width-$w)/2, 0, 0, 0, $w, $h, imagesx($src), imagesy($src));
}
// indien de cache directory niet bestaat maak hem aan
@mkdir($targetDir, 0777, true);
// Sla de nieuwe afbeelding op.
imagejpeg($dest, $targetDir . '/' . $srcFile);
// even netjes het geheugen vrij maken
imagedestroy($dest);
imagedestroy($src);
}
cacheImage('chiffon.jpeg', 'nieuw', 200, 200);
?>
En dit is de foutmelding die ik heb gekregen:
Warning: imagecreatefromjpeg(): gd-jpeg: JPEG library reports unrecoverable error: in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 627 Warning: imagecreatefromjpeg(): 'chiffon.jpeg' is not a valid JPEG file in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 627 Warning: imagepalettetotruecolor() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 628 Warning: imagecolorallocate() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 634 Warning: imagesx() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 638 Warning: imagesy() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 638 Warning: Division by zero in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 638 Warning: imagesx() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 641 Warning: imagesy() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 641 Warning: imagesx() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 652 Warning: imagesy() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 652 Warning: imagecopyresampled() expects parameter 2 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 652 Warning: imagedestroy() expects parameter 1 to be resource, boolean given in /volume1/web/jeroenvanrensen/wauwcloset/admin/index.php on line 663
Snap jij wat er fout is gegaan?
Gewijzigd op 08/04/2020 15:58:22 door Jeroen van Rensen
Als ik op de eerste foutmelding richt, die het belangrijkste is (de rest is een kettingreactie omdat er geen geldige resource is), dan gok ik erop dat je geen geldige jpeg-afbeelding erin gooit.
Hier zou tevens een nette foutafhandeling omheen kunnen, met bijvoorbeeld een exception. Of voor het gemak een nette error in een afbeelding ;-)
Hier zou tevens een nette foutafhandeling omheen kunnen, met bijvoorbeeld een exception. Of voor het gemak een nette error in een afbeelding ;-)
Gewijzigd op 08/04/2020 16:03:59 door - Ariën -
Wat bedoel je met een "nette" foutafhandeling en een "nette" error? Die begrippen ken ik niet.
Gokje ...
Je hebt als bestandsnaam 'chiffon.jpeg' ingegeven zonder het volledige pad.
Probeer het eens met
/volledig/pad/naar/chiffon.jpeg
Je hebt als bestandsnaam 'chiffon.jpeg' ingegeven zonder het volledige pad.
Probeer het eens met
/volledig/pad/naar/chiffon.jpeg
Update:
Ik heb wél een bestand in mijn map genaamd "nieuw" met de goede afmetingen (200x200), maar dit is een zwart vierkant
Toevoeging op 08/04/2020 17:52:24:
Hallo, bedoel je vanaf de root?
Ik heb wél een bestand in mijn map genaamd "nieuw" met de goede afmetingen (200x200), maar dit is een zwart vierkant
Toevoeging op 08/04/2020 17:52:24:
Hallo, bedoel je vanaf de root?
Jeroen van Rensen op 08/04/2020 17:46:40:
Update:
Ik heb wél een bestand in mijn map genaamd "nieuw" met de goede afmetingen (200x200), maar dit is een zwart vierkant
Ik heb wél een bestand in mijn map genaamd "nieuw" met de goede afmetingen (200x200), maar dit is een zwart vierkant
Op wie reageer je nu? Heb je geprobeerd wat ik zei?
Toevoeging op 08/04/2020 17:53:10:
>> Hallo, bedoel je vanaf de root?
Ja, dat is het volledige pad.
Dat antwoord was net iets later geplaatst dan jouw antwoord.
Op die manier werkt het niet, op de eerste manier (zonder volledige pad) wel
Op die manier werkt het niet, op de eerste manier (zonder volledige pad) wel
Jeroen van Rensen op 08/04/2020 17:43:42:
Wat bedoel je met een "nette" foutafhandeling en een "nette" error? Die begrippen ken ik niet.
Met zo'n brol aan errors wordt niemand tevreden. Als het eerste mis gaat, dan moet je op een fatsoenlijke manier het script laten stoppen. If-else statements komen hier goed bij van pas.
Zeg tegen de bezoeker dan gewoon 'dat er een fout is opgetreden in de website' en log dit op de achtergrond in een bestand, voor de beheerder.
Gewijzigd op 08/04/2020 17:59:56 door - Ariën -
Oh ok, ja. Maar ik ben het nu nog aan het maken, dus nu is het handig als hij alle fouten toont. Als het werkend is zet ik de error_reporting uit.
Hier de jurk.
https://www.jeroenvanrensen.nl/wauwcloset/admin/chiffon.jpeg
En hier het zwarte gat.
https://www.jeroenvanrensen.nl/wauwcloset/admin/nieuw/chiffon.jpeg
De code van het bestand geeft aan dat het een RIFF/WebP bestand is :
http://support.moonpoint.com/software/file_formats/riff/webpvp8/
Converteren naar jpg doe je hier :
https://image.online-convert.com/convert/webp-to-jpg
https://www.jeroenvanrensen.nl/wauwcloset/admin/chiffon.jpeg
En hier het zwarte gat.
https://www.jeroenvanrensen.nl/wauwcloset/admin/nieuw/chiffon.jpeg
De code van het bestand geeft aan dat het een RIFF/WebP bestand is :
http://support.moonpoint.com/software/file_formats/riff/webpvp8/
Converteren naar jpg doe je hier :
https://image.online-convert.com/convert/webp-to-jpg
Gewijzigd op 08/04/2020 18:10:12 door Adoptive Solution
Ja, maar dan moet je wel goede foutmelding hebben. Dus als je imagecreatefromjpeg() wilt gebruiken, controleer dan eerst of je écht een jpeg geeft, en geen webp, svg, bmp of iets anders dan jpeg. Met getimagesize() kan je ook de mime-types uitlezen die beschrijven wat voor soort bestand het is. Misschien moet je wel imagecreatefrompng(), imagecreatefromwebp
of imagecreatefrombmp() gebruiken.
En anders meld je dat het een ongeldig bestand is.
of imagecreatefrombmp() gebruiken.
En anders meld je dat het een ongeldig bestand is.
Gewijzigd op 08/04/2020 18:11:09 door - Ariën -
Hallo,
Ontzettend bedankt! Hij werkt nu!
Nogmaals, ontzettend bedankt!
Ontzettend bedankt! Hij werkt nu!
Nogmaals, ontzettend bedankt!
Uit interesse, hoe ziet je code er nu uit?



