{"id":2024,"date":"2009-08-07T09:54:22","date_gmt":"2009-08-07T07:54:22","guid":{"rendered":"http:\/\/blog.ginchen.de\/?p=2024"},"modified":"2012-02-04T01:09:22","modified_gmt":"2012-02-04T00:09:22","slug":"png-transparenzen-erhalten-mit-gd-lib","status":"publish","type":"post","link":"http:\/\/blog.ginchen.de\/en\/2009\/08\/07\/png-transparenzen-erhalten-mit-gd-lib\/","title":{"rendered":"Preserve PNG transparency with GD Lib"},"content":{"rendered":"\"Semi-transparent\r\n\r\n

Lately I had to write a PHP function that generates differently sized thumbnails from an image with GD Lib<\/a>. 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()<\/code> and imagesavealpha()<\/code>, which – as it later transpired – were completely meaningless for my purposes.
\r\nWell, 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.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n$filename = \"rotverlauf.png\";\r\n\r\n$oldimg = imagecreatefrompng($filename);\r\n\r\n$oldwidth = imagesx($oldimg);\r\n$oldheight = imagesy($oldimg);\r\n$newwidth = $oldwidth\/2;\r\n$newheight = $oldheight\/2;\r\n\r\n$newimage = imagecreate($newwidth, $newheight);\r\n$color = imagecolorallocatealpha($newimage, 0, 0, 0, 127);\r\nimagefill($newimage, 0, 0, $color);\r\n\r\nimagecopyresampled($newimage, $oldimg, 0, 0, 0, 0, $newwidth, $newheight, $oldwidth, $oldheight);\r\n<\/pre>\r\n\r\n\r\n\r\n
The trick is to first create a new image ($newimage<\/code>) and fill it with a transparent background color ($color<\/code>). If you now copy the original image into it with the help of imagecopyresampled()<\/code>, the transparency will be preserved.
\r\nThe example script reduces the red dot to half its size. The result can be seen on the left.<\/p>\r\n\r\n
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()<\/code> by imagecreatetruecolor()<\/code> and imagecolorallocatealpha()<\/code> by imagecolorallocate()<\/code>. Ergo:<\/p>\r\n\r\n
\r\n$newimage = imagecreatetruecolor($newwidth, $newheight);\r\n$color = imagecolorallocate($newimage, 255, 255, 255);\r\n<\/pre>\r\n\r\n\r\n\r\n
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.
\r\nActually I could have used imagecreatetruecolor()<\/code> 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()<\/code> when making PNGs.
\r\nOn the right you can now see the fantastic red dot as JPEG.<\/p>\r\n\r\n
Now that the new image is ready, you can either save it to a file:<\/p>\r\n\r\n
\r\nimagepng($nm, \"new-filename.png\"); \/\/or imagejpeg();\r\n<\/pre>\r\n\r\n
or output it directly:<\/p>\r\n\r\n
\r\nheader(\"Content-type: image\/png\"); \/\/or image\/jpg\r\nimagepng($nm); \/\/or imagejpeg();\r\n<\/pre>\r\n\r\n
Update (12th October 2009)<\/h3>\r\n\r\n
It has been brought to my attention that my version doesn’t seem to work correctly on every server either. If that is the case, you can try to replace the lines 11 and 12 by the following:<\/p>\r\n\r\n
\r\n$color = imagecolorallocate($nm, 255, 255, 255);\r\nimagefill($nm, 0, 0, $color);\r\nimagecolortransparent($nm, $color);\r\n<\/pre>\r\n<\/ins>","protected":false},"excerpt":{"rendered":"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 […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[76],"tags":[98,99,392,122,393],"_links":{"self":[{"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/posts\/2024"}],"collection":[{"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/comments?post=2024"}],"version-history":[{"count":5,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/posts\/2024\/revisions"}],"predecessor-version":[{"id":5858,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/posts\/2024\/revisions\/5858"}],"wp:attachment":[{"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/media?parent=2024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/categories?post=2024"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/tags?post=2024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}