De PHPhulp kroeg
[GDlib] resizen zonder uitrekken
Ik ben op zoek naar een manier waarmee ik een afbeelding kan resizen waarbij hij de grootte van een vooraf ingesteld kader aanneemt.
Wat is hier een slimme manier voor?
Ik gebruik nu een manier waarbij hij hem eerst binnen een vierkant krijgt, en later knipt hij dan alsnog de randjes eraf. Maar dit werkt slecht als de afbeelding al de goede verhoudingen heeft, dan worden er namelijk onnodig randen afgeknipt.
bv.
Code (php)
1
2
3
4
2
3
4
<?php
$afb = "img/flag.jpg"; // elkel relatief pad gegruiken, geen http:// ...
list($width, $height, $type, $attr) = getimagesize($afb);
?>
$afb = "img/flag.jpg"; // elkel relatief pad gegruiken, geen http:// ...
list($width, $height, $type, $attr) = getimagesize($afb);
?>
En dan is het gewoon een kwestie van rekenen.
Hoe groot is je kader?
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
60
61
62
63
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
<?php
if (strtolower($extensie) == "jpg" || strtolower($extensie) == "jpeg" || strtolower($extensie) == "png" || strtolower($extensie) == "gif")
{
$afbeelding = $_FILES[$upload_name]['tmp_name'];
// Afbeelding verkleinen
// Set a maximum height and width
$width = 80;
$height = 48;
// Get new dimensions
list($width_orig, $height_orig) = getimagesize($afbeelding);
$ratio_orig = 1;
if($width_orig >= $height_orig)
{
$percent = $width / $width_orig;
$width_new = round($width_orig * $percent);
$height_new = round($height_orig * $percent);
if($height_new > $height)
{
$percent = $height / $height_new;
$width_new = round($width_new * $percent);
$height_new = round($height_new * $percent);
}
}
else
{
$percent = $height / $height_orig;
$width_new = round($width_orig * $percent);
$height_new = round($height_orig * $percent);
if($width_new > $width)
{
$percent = $width / $width_new;
$width_new = round($width_new * $percent);
$height_new = round($height_new * $percent);
}
}
// Resample
$image_p = imagecreatetruecolor($width_new, $height_new);
if (strtolower($extensie) == "jpg" || strtolower($extensie) == "jpeg")
{
$image = imagecreatefromjpeg($afbeelding);
}
elseif (strtolower($extensie) == "png")
{
$image = imagecreatefrompng($afbeelding);
}
elseif (strtolower($extensie) == "gif")
{
$image = imagecreatefromgif($afbeelding);
}
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width_new, $height_new, $width_orig, $height_orig);
// Output
imagepng($image_p, "thumbs/naampje.png");
}
?>
if (strtolower($extensie) == "jpg" || strtolower($extensie) == "jpeg" || strtolower($extensie) == "png" || strtolower($extensie) == "gif")
{
$afbeelding = $_FILES[$upload_name]['tmp_name'];
// Afbeelding verkleinen
// Set a maximum height and width
$width = 80;
$height = 48;
// Get new dimensions
list($width_orig, $height_orig) = getimagesize($afbeelding);
$ratio_orig = 1;
if($width_orig >= $height_orig)
{
$percent = $width / $width_orig;
$width_new = round($width_orig * $percent);
$height_new = round($height_orig * $percent);
if($height_new > $height)
{
$percent = $height / $height_new;
$width_new = round($width_new * $percent);
$height_new = round($height_new * $percent);
}
}
else
{
$percent = $height / $height_orig;
$width_new = round($width_orig * $percent);
$height_new = round($height_orig * $percent);
if($width_new > $width)
{
$percent = $width / $width_new;
$width_new = round($width_new * $percent);
$height_new = round($height_new * $percent);
}
}
// Resample
$image_p = imagecreatetruecolor($width_new, $height_new);
if (strtolower($extensie) == "jpg" || strtolower($extensie) == "jpeg")
{
$image = imagecreatefromjpeg($afbeelding);
}
elseif (strtolower($extensie) == "png")
{
$image = imagecreatefrompng($afbeelding);
}
elseif (strtolower($extensie) == "gif")
{
$image = imagecreatefromgif($afbeelding);
}
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width_new, $height_new, $width_orig, $height_orig);
// Output
imagepng($image_p, "thumbs/naampje.png");
}
?>
Je moet hierbij wel in de $extensie aangeven welke type afbeelding het is.
Hopelijk kom je hiermee een beetje uit de voeten.
Eventueel vorm je dat vlug om tot een functie, met als parameters ($img, $maxWidth, $mahHeight).
Dat script is niet wat ik zoek,
Ik wil namelijk een afbeelding verkleinen, maar dan moet het resultaat uitgesneden worden tot een vooraf ingestelde verhouding.
Ik gebruikt voor een andere website dit script:
http://phphulp.nl/forum/showtopic.php?cat=1&id=66438
(zie laatste reactie)
Maar dat werkt alleen als het resultaat vierkant moet zijn, maar ik wil het resultaat dus 200 x 320 hebben.
Maar dat doe ik op de volgende manier:
Ik heb een willekeurige afbeelding.
Die resize ik zo, dat de kortste kant 320 pixels is, en dat de verhoudingen gelijk blijven.
Dan snij ik de randen eraf zodat ik een vierkant van 320x320 overhoud.
En daar snij ik dan 200x320 uit.
Het probleem hiervan is merkbaar als de afbeelding al de goede verhouding heeft.
Dus bijvoorbeeld een afbeelding van 2000x3200, wordt dan eerst vierkant gemaakt om hem vervolgens weer 200x320 te maken.
Hiermee verlies je onnodig een rand.
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
$afb = "images/1.jpg"; // elkel relatief pad gegruiken, geen http:// ...
echo '<pre>'. $width.' '.$height.' '.$type.' '.$attr .'</pre>';
$kaderWidth = 300;
$kaderHeight = 200;
$attr1 = imageAttrInKader($afb, $kaderWidth, $kaderHeight, 'vullen');
$attr2 = imageAttrInKader($afb, $kaderWidth, $kaderHeight, 'volledig');
echo '<html>
<head>
<style>
.kader{width: '. $kaderWidth .'px; height: '. $kaderHeight .'px; border: 1px solid #000000; margin: 3px;}
</style>
</head>
<body>
<div class="kader"><img '. $attr1 .' src="'. $afb .'"/></div>
<div class="kader"><img '. $attr2 .' src="'. $afb .'"/></div>
</body>
</html>';
function imageAttrInKader($src, $kaderWidth, $kaderHeight, $option)
{
try
{
list($width, $height, $type, $attr) = getimagesize($src);
$hellingImage = $height / $width;
$hellingKader = $kaderHeight / $kaderWidth;
switch ($option)
{
case 'vullen': // het kader wordt volledig gevuld met de image. Eventueel wordt een deel van de image uitgesneden
if ($hellingImage > $hellingKader)
{
return ' width="'. $kaderWidth .'" ';
}
else
{
return ' height="'. $kaderHeight .'" ';
}
break;
case 'volledig': // De image wordt volledig getoond, eventueel blijft een deel van het kader blanco
if ($hellingImage < $hellingKader)
{
return ' width="'. $kaderWidth .'" ';
}
else
{
return ' height="'. $kaderHeight .'" ';
}
break;
}
}
catch(Exception $e)
{
return null;
}
}
?>
$afb = "images/1.jpg"; // elkel relatief pad gegruiken, geen http:// ...
echo '<pre>'. $width.' '.$height.' '.$type.' '.$attr .'</pre>';
$kaderWidth = 300;
$kaderHeight = 200;
$attr1 = imageAttrInKader($afb, $kaderWidth, $kaderHeight, 'vullen');
$attr2 = imageAttrInKader($afb, $kaderWidth, $kaderHeight, 'volledig');
echo '<html>
<head>
<style>
.kader{width: '. $kaderWidth .'px; height: '. $kaderHeight .'px; border: 1px solid #000000; margin: 3px;}
</style>
</head>
<body>
<div class="kader"><img '. $attr1 .' src="'. $afb .'"/></div>
<div class="kader"><img '. $attr2 .' src="'. $afb .'"/></div>
</body>
</html>';
function imageAttrInKader($src, $kaderWidth, $kaderHeight, $option)
{
try
{
list($width, $height, $type, $attr) = getimagesize($src);
$hellingImage = $height / $width;
$hellingKader = $kaderHeight / $kaderWidth;
switch ($option)
{
case 'vullen': // het kader wordt volledig gevuld met de image. Eventueel wordt een deel van de image uitgesneden
if ($hellingImage > $hellingKader)
{
return ' width="'. $kaderWidth .'" ';
}
else
{
return ' height="'. $kaderHeight .'" ';
}
break;
case 'volledig': // De image wordt volledig getoond, eventueel blijft een deel van het kader blanco
if ($hellingImage < $hellingKader)
{
return ' width="'. $kaderWidth .'" ';
}
else
{
return ' height="'. $kaderHeight .'" ';
}
break;
}
}
catch(Exception $e)
{
return null;
}
}
?>
Edit: je kan ook best dit toevoegen aan de css van kader:
text-align: center; overflow: hidden;
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
'Daan:
Het probleem hiervan is merkbaar als de afbeelding al de goede verhouding heeft.
Dus bijvoorbeeld een afbeelding van 2000x3200, wordt dan eerst vierkant gemaakt om hem vervolgens weer 200x320 te maken.
Hiermee verlies je onnodig een rand.
Dus bijvoorbeeld een afbeelding van 2000x3200, wordt dan eerst vierkant gemaakt om hem vervolgens weer 200x320 te maken.
Hiermee verlies je onnodig een rand.
Dan check je toch eerst met getimagesize wat de verhouding w x h is? Is die 1.6, dan hoef je alleen maar te resizen en niet te croppen.
Jan Koehoorn: image upload met crop en resize
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
60
61
62
63
64
65
66
67
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
<?php
/****
* crop image naar 200 * 320
* dat betekent een ratio w * h van 0.625
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_FILES['userfile']['error'] == 0) {
list ($src_w, $src_h) = getimagesize ($_FILES['userfile']['tmp_name']);
$ratio = $src_w / $src_h;
$img = new Imagick ($_FILES['userfile']['tmp_name']);
if ($ratio > 0.625) {
$img->scaleImage (0, 320);
$img->writeImage ('phphulp_uncropped.jpg');
$img->cropImage (200, 320, round (($img->getImageWidth () - 200) / 2), 0);
}
elseif ($ratio < 0.625) {
$img->scaleImage (200, 0);
$img->writeImage ('phphulp_uncropped.jpg');
$img->cropImage (200, 320, 0, round (($img->getImageHeight () - 320) / 2));
}
else {
$img->scaleImage (200, 320);
$img->writeImage ('phphulp_uncropped.jpg');
}
$img->writeImage ('phphulp.jpg');
$img->destroy ();
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHPHulp voorbeelden</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.jankoehoorn.nl/phphulp/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.jankoehoorn.nl/phphulp/stylesheet.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Jan Koehoorn | PHPHulp voorbeelden</h1>
</div>
<div id="form">
<form method="post" action="image-upload-crop-resize.php" enctype="multipart/form-data">
<input id="userfile" name="userfile" type="file" />
<input type="submit" value="upload" />
</form>
</div>
<div id="image">
<p>Cropped image:</p>
<p><img style="border: 1px solid black;" src="phphulp.jpg" /></p>
<p>Uncropped image:</p>
<p><img style="border: 1px solid black;" src="phphulp_uncropped.jpg" /></p>
</div>
</div>
</body>
</html>
/****
* crop image naar 200 * 320
* dat betekent een ratio w * h van 0.625
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_FILES['userfile']['error'] == 0) {
list ($src_w, $src_h) = getimagesize ($_FILES['userfile']['tmp_name']);
$ratio = $src_w / $src_h;
$img = new Imagick ($_FILES['userfile']['tmp_name']);
if ($ratio > 0.625) {
$img->scaleImage (0, 320);
$img->writeImage ('phphulp_uncropped.jpg');
$img->cropImage (200, 320, round (($img->getImageWidth () - 200) / 2), 0);
}
elseif ($ratio < 0.625) {
$img->scaleImage (200, 0);
$img->writeImage ('phphulp_uncropped.jpg');
$img->cropImage (200, 320, 0, round (($img->getImageHeight () - 320) / 2));
}
else {
$img->scaleImage (200, 320);
$img->writeImage ('phphulp_uncropped.jpg');
}
$img->writeImage ('phphulp.jpg');
$img->destroy ();
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHPHulp voorbeelden</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.jankoehoorn.nl/phphulp/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.jankoehoorn.nl/phphulp/stylesheet.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Jan Koehoorn | PHPHulp voorbeelden</h1>
</div>
<div id="form">
<form method="post" action="image-upload-crop-resize.php" enctype="multipart/form-data">
<input id="userfile" name="userfile" type="file" />
<input type="submit" value="upload" />
</form>
</div>
<div id="image">
<p>Cropped image:</p>
<p><img style="border: 1px solid black;" src="phphulp.jpg" /></p>
<p>Uncropped image:</p>
<p><img style="border: 1px solid black;" src="phphulp_uncropped.jpg" /></p>
</div>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Dit is precies wat ik zocht, geweldig!