Snijd afbeelding bij tot vierkant
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
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
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
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
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
Toevoeging op 03/04/2020 08:39:35:
Hallo Jan, Fijn dat je meedenkt, maar een witte achtergrond is prima. Toch bedankt!
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
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 -
Je hebt als bestandsnaam 'chiffon.jpeg' ingegeven zonder het volledige pad.
Probeer het eens met
/volledig/pad/naar/chiffon.jpeg
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.
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 -
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
of imagecreatefrombmp() gebruiken.
En anders meld je dat het een ongeldig bestand is.
Gewijzigd op 08/04/2020 18:11:09 door - Ariën -
Ontzettend bedankt! Hij werkt nu!
Nogmaals, ontzettend bedankt!
Dit topic is gesloten.