PNG Skalieren

Wer mit PHP schon einmal ein Bildchen skalieren wollte, ist sicher schon mit dem Problem von imagescale() konfrontiert worden. Nämlich, imagescale() erzeugt ein gänzlich neues Bild, welches aus der gelieferten Graphikressource die Transparenz entfernt. Um nun also den transparenten Alphakanal eines PNGs weiter zu nutzen und das Bild trotzdem in seiner Größe zu verändern, sollte man einen kleinen Umweg tun. Zuerst ergzeugt man ein neues, leeres Image mit imagecreatetruecolor(). Diesem weist man einen transparenten Hintergrund zu. Im Anschluss kopiert man die Grapik vom alten Bildchen in das neue Image. Juhu: Die Transparenz bleibt bestehen (selbst transparente Schatten mit Teiltransparenz) und das neue PNG hat auch seine Größe verändert.

Die Funktion übernimmt den Pfad zu einem PNG Bild und den Skalierungsfaktor in Prozent. Wobei 0.5 für 50 % der Größe steht, 0.2 für 20 %, 2 für 200% usw. Zurückgegeben wird dann das neue, skalierte Bildchen.

<?php
function pngSkalieren($datei, $faktor) {
$bild = imagecreatefrompng($datei);
$x = imagesx($bild);
$y = imagesy($bild);

$neuesBild = imagecreatetruecolor($x * $faktor, $y * $faktor);

imagesavealpha($neuesBild, true);
$transparent = imagecolorallocatealpha($neuesBild, 0, 0, 0, 127);
imagefill($neuesBild, 0, 0, $transparent);

imagecopyresized($neuesBild, $bild, 
                 0, 0, 0, 0, 
                 $x * $faktor, $y * $faktor, 
                 $x, $y);

return $neuesBild; 
}
?>

Schauen wir uns die Funktion im Detail an! Die Funktion übernimmt zwei Argument - erstens den Pfad zum PNG und den Skalierungsfaktor. Mit imagecreatefrompng() wird das PNG eingelesen und einer Variable zugewiesen. Die Größen (Breite und Höhe in Pixel) werden ermittelt. Ein neues Image mit TrueColor wird erzeugt - und zwar reduziert bzw. erweitert um den Skalierungsfaktor. Das neue Image bekommt einen Alphakanal. Die Transparenz wird definiert, wobei 0,0,0 für die Farben Rot, Grün und Blau steht und 127 den Alpha der Transparenz festlegt. Hier: 127 für volle Transparenz. 0 stünde für volle Opakheit. imagefill() weist dem neuen Bild die vordefinierte Transparenz zu. imagecopyresized() kopiert nun das alte Bild in das neue Image. 0,0,0,0 sind die Koordinaten des Ziels und der Quelle. In diesem Fall immer 0,0 also in der linken oberen Ecke. Die Ziel und Quellgröße werden noch als Parameter mitgegeben. return liefert dann, seiner Bestimmung gemäß das neue Bildchen.

Wie verwendet man nun diese Funktion? Hier wird gezeigt, wie ein PHP Script über einen Image-Header angezeigt wird. Den Aufruf sollte man dann als PHP File speichern - z. B. neuesBild.php.

<?php
header("Content-type: image/png");
$thumb = pngSkalieren("drucker.png", 0.2);
imagepng($thumb);
?>

Jetzt lässt es sich Problemlos in einem img Element in den HTML Code einbetten.

<img src="neuesBild.php" alt="Skaliertes Bild">

Oder, man speichert das neue PNG Bild ab. Dafür muss der Funktion imagepng() als zweiten Parameter nur ein Pfad mit neuem Dateinamen mitgegeben werden!

<?php
$thumb = pngSkalieren("drucker.png", 0.2);
imagepng($thumb, "neuerDrucker.png");
?>

Zu guter Letzt präsentiere ich noch eine Funktion die zu einer bestimmten Pixelbreite skaliert.

<?php
function pngSkalierenBreite($datei, $xNeu) {

$bild = imagecreatefrompng($datei);
$x = imagesx($bild);
$y = imagesy($bild);

$yNeu = $y * $xNeu / $x;


$neuesBild = imagecreatetruecolor($xNeu, $yNeu);

imagesavealpha($neuesBild, true);
$transparent = imagecolorallocatealpha($neuesBild, 0, 0, 0, 127);
imagefill($neuesBild, 0, 0, $transparent);

imagecopyresized($neuesBild, $bild, 
                 0, 0, 0, 0, 
                 $xNeu, $yNeu, 
                 $x, $y);

return $neuesBild; 
}
?>

Der Abruf der Funktion erfolgt nun mit der Pfadangabe und der Pixelbreite des neuen PNG Bild!

<?php
header("Content-type: image/png");
$thumb = pngSkalierenBreite("drucker.png", 500);
imagepng($thumb);
?>

So, das wars. Natürlich freue ich mich über Feedback (insbesondere über die gute alte eMail). Auch Verbesserungen des Codes nehme ich gerne entgegen. Ihr findet mich auf meiner Webite.

 

Thomas Maier css4.at Logo
Autor: Thomas Maier - https://maier.css4.at