Neulich mußte ich eine PHP-Funktion schreiben, die mittels GD Lib aus einem Bild verschieden große Vorschaubilder generiert. Dabei ärgerte ich mich ziemlich lange mit semi-transparenten PNG-Grafiken herum. Im Internet fand ich zwar viele Tips, die schon in die richtige Richtung wiesen, aber eine wirklich vollständige und saubere Lösung konnte ich nicht auftreiben. Oft wurde auch die ach so große Wichtigkeit der Funktionen imagealphablending() und imagesavealpha() betont, die – wie sich herausstellte – für meine Zwecke vollkommen bedeutungslos waren.
Nun ja, wie immer halte ich die Lösung hier fest, falls jemand anders irgendwann einmal ebenso verzweifelt danach sucht wie ich – oder falls ich sie mal vergesse. ;) Der hübsche rote Punkt hier rechts soll zur Veranschaulichung dienen.

Lately I had to write a PHP function that generates differently sized thumbnails from an image with GD Lib. Thereby I had lots of trouble with semi-transparent PNG graphics. Although I found many tips on the internet that pointed me in the right direction, I couldn’t find a really complete and neat solution. Many people emphasized the oh so big importance of the functions imagealphablending() and imagesavealpha(), which – as it later transpired – were completely meaningless for my purposes.
Well, I’ll write the solution down here as usual, in case somebody else is looking for it as desperately as I did – or in case I forget it. ;) The pretty red dot here on the right will serve as visualization.

$filename = "rotverlauf.png";

$oldimg = imagecreatefrompng($filename);

$oldwidth = imagesx($oldimg);
$oldheight = imagesy($oldimg);
$newwidth = $oldwidth/2;
$newheight = $oldheight/2;

$newimage = imagecreate($newwidth, $newheight);
$color = imagecolorallocatealpha($newimage, 0, 0, 0, 127);
imagefill($newimage, 0, 0, $color);

imagecopyresampled($newimage, $oldimg, 0, 0, 0, 0, $newwidth, $newheight, $oldwidth, $oldheight);

Der Trick besteht darin, zuerst ein neues Bild ($newimage) zu erstellen und dieses mit einer transparenten Hintergrundfarbe ($color) zu füllen. Wenn man dort nun das Originalbild mithilfe von imagecopyresampled() hineinkopiert, bleibt die Transparenz erhalten.
Das Beispielscript reduziert den roten Punkt auf die Hälfte seiner Größe. Das Ergebnis ist links zu sehen.

Nun hatte ich allerdings noch ein weiteres Problem: Ich wollte die Thumbnails von PNG-Grafiken auch im JPEG-Format speichern, sie also z. B. über einen weißen oder schwarzen Hintergrund legen, wobei aber der Farbverlauf natürlich wieder erhalten bleiben sollte. Nach einigen Fehlversuchen stellte sich die Lösung eigentlich als sehr einfach heraus. ;) Man muß nur die Funktion imagecreate() durch imagecreatetruecolor() und imagecolorallocatealpha() durch imagecolorallocate() ersetzen. Also:

$newimage = imagecreatetruecolor($newwidth, $newheight);
$color = imagecolorallocate($newimage, 255, 255, 255);

Wie man sieht, habe ich als Hintergrundfarbe diesmal weiß (255, 255, 255) gewählt, weil es in den meisten Fällen einfach besser aussieht als schwarz.
Eigentlich hätte man imagecreatetruecolor() auch schon im ersten Beispiel bei der Erzeugung des PNGs verwenden können. Manche Server scheinen damit aber Probleme zu haben (so auch meiner), daher sollte man beim PNG zur Sicherheit lieber bei imagecreate() bleiben.
Rechts sieht man nun den fantastischen roten Kreis als JPEG.

Jetzt wo das neue Bild fertig ist, kann man es entweder als Datei speichern:

imagepng($nm, "neuer-dateiname.png"); //bzw. imagejpeg();

oder direkt ausgeben lassen:

header("Content-type: image/png"); //bzw. image/jpg
imagepng($nm); //bzw. imagejpeg();

$color = imagecolorallocate($nm, 255, 255, 255);
imagefill($nm, 0, 0, $color);
imagecolortransparent($nm, $color);

$filename = "rotverlauf.png";

$oldimg = imagecreatefrompng($filename);

$oldwidth = imagesx($oldimg);
$oldheight = imagesy($oldimg);
$newwidth = $oldwidth/2;
$newheight = $oldheight/2;

$newimage = imagecreate($newwidth, $newheight);
$color = imagecolorallocatealpha($newimage, 0, 0, 0, 127);
imagefill($newimage, 0, 0, $color);

imagecopyresampled($newimage, $oldimg, 0, 0, 0, 0, $newwidth, $newheight, $oldwidth, $oldheight);

The trick is to first create a new image ($newimage) and fill it with a transparent background color ($color). If you now copy the original image into it with the help of imagecopyresampled(), the transparency will be preserved.
The example script reduces the red dot to half its size. The result can be seen on the left.

But I had yet another problem: I wanted to save the thumbnails of PNG graphics in the JPEG format, too, i. e. put them on a white or black background, while the color gradient should of course be preserved. After a few unsuccessful attempts, the solution turned out to be quite simple. ;) You just have to replace the functions imagecreate() by imagecreatetruecolor() and imagecolorallocatealpha() by imagecolorallocate(). Ergo:

$newimage = imagecreatetruecolor($newwidth, $newheight);
$color = imagecolorallocate($newimage, 255, 255, 255);

As you can see, I chose white (255, 255, 255) as background color this time, because it looks better than black in most of the cases.
Actually I could have used imagecreatetruecolor() in the first example, too, when creating a PNG. But some servers (like mine) seem to have problems with that, so you should rather stick with imagecreate() when making PNGs.
On the right you can now see the fantastic red dot as JPEG.

Now that the new image is ready, you can either save it to a file:

imagepng($nm, "new-filename.png"); //or imagejpeg();

or output it directly:

header("Content-type: image/png"); //or image/jpg
imagepng($nm); //or imagejpeg();

$color = imagecolorallocate($nm, 255, 255, 255);
imagefill($nm, 0, 0, $color);
imagecolortransparent($nm, $color);