{"id":3281,"date":"2015-06-23T19:51:05","date_gmt":"2015-06-23T19:51:05","guid":{"rendered":"https:\/\/www.zensations.at\/?p=3281"},"modified":"2023-08-09T00:34:35","modified_gmt":"2023-08-09T00:34:35","slug":"bringing-magick-to-gd","status":"publish","type":"post","link":"https:\/\/www.zensations.at\/en\/blog\/bringing-magick-to-gd\/","title":{"rendered":"Bringing Magick to GD"},"content":{"rendered":"

ImageMagick straightens the skew<\/span><\/span><\/h2>\n

Building a component for a client of our’s (Take on the Night) for merging some images together to get a kind of cut-out effect, at first I went straight to the known and \u201cbeloved\u201d GD-Library. <\/span>About the struggles, that should follow, and why I jumped behind enemy lines (this is where the Magick happens), I’m going to tell you in a moment’s time.<\/span><\/span><\/p>\n

Unpacking the bundle<\/span><\/span><\/h2>\n

As the library formerly known as \u201cGIF Draw<\/a>\u201d is bundled into PHP since version 4.3, I used it out of habit for our client\u2019s project. As I\u2019ve already shown in a\u00a0post on my own blog<\/a>\u00a0a few months back, GD is quite easy to grasp and use. Weren\u2019t it for a few flaws in the bundled library, like the following, we certainly would have sticked to it.<\/p>\n

For neat simple copying of one image to another I have never run into problems. But for the project at hand the objects to be pasted needed a little rotation. And here the problems began.<\/p>\n

Upping the Set<\/h2>\n

Here\u2019s our basic code, up to the point, where we\u2019ll begin turning the screws:<\/p>\n

\/* Keeping it simple, we bundle all our * object Info into an array *\/ $imageObject = array( 'width' => 245.50001525879, 'height' => 92.5, 'zoom' => 0.5, 'rotation' => -10, 'left' => 75, 'top' => 125 );<\/code><\/p>\n

\/\/ Our background file and our object $backgroundFile = ‘background.jpg’; $objectFile = ‘object.png’;<\/p>\n

Let the games begin<\/h2>\n

And now the fun part begins, let’s load our image and process it:<\/span><\/span><\/p>\n

\/\/ Load the background image from a string \/\/ so we won't have to think about the format $boximage = imagecreatefromstring(file_get_contents($backgroundFile));<\/code><\/p>\n

\/\/ The image object has larger proportions than \/\/ we wan’t it to, so we have to scale it down. <\/span>$objectWidth = ceil($imageObject[‘width’] * $imageObject[‘zoom’]); <\/span>$objectHeight = ceil($imageObject[‘height’] * $imageObject[‘zoom’]);<\/span><\/span><\/p>\n

\/\/ Now create an objectImage with our \/\/ calculated dimensions and load our object. <\/span>$objectImage = imagecreatetruecolor($objectWidth, $objectHeight); <\/span>$tempImage = imagecreatefromstring(file_get_contents($objectFile));<\/span><\/span><\/p>\n

\/\/ Copying and resampling our object with \/\/ preserved alpha-channel imagecolortransparent($objectImage, imagecolorallocatealpha($objectImage, 0, 0, 0, 127)); <\/span>imagealphablending($objectImage, false); <\/span>imagesavealpha($objectImage, true); <\/span>imagecopyresampled($objectImage, $tempImage, 0, 0, 0, 0, $objectWidth, $objectHeight, imagesx($tempImage), imagesy($tempImage));<\/span><\/span><\/p>\n

Up until now there isn’t much to worry about – preserving the PNG’s alpha-channel might be the most troublesome part, but I think the\u00a0 <\/span><\/span>PHP documentation, specifically the comments<\/span><\/span><\/a> \u00a0there, has this covered. <\/span>To see our progress till now, let’s paste the object:<\/span><\/span><\/p>\n

The bold and the beautiful<\/span><\/span><\/h2>\n

imagealphablending($boxImage, true); imagecopy($boxImage, $objectImage, $imageObject['left'], $imageObject['top'], 0, 0, $objectWidth, $objectHeight);<\/code><\/p>\n

\u2026 and flush our image to the browser:<\/span><\/span><\/p>\n

\/\/ Flush the image to the browser. header('Content-type: image\/jpeg'); imagejpeg($boximage); imagedestroy($boximage);<\/code><\/p>\n

Try it on your server and you’ll get something like this \u201cbeauty\u201d:<\/span><\/span><\/p>\n

Flop-ROD<\/span><\/span><\/h2>\n

Now here comes the part which “breaks” our neat script – “Rotation of Death”:<\/span><\/span><\/p>\n

$angle = $imageObject['rotation'] % 360; $objectRotated = imagerotate($objectImage, -$angle, imagecolorallocatealpha($objectImage, 0, 0, 0, 127)); imagealphablending($objectRotated, false); imagesavealpha($objectRotated, true);<\/code><\/p>\n

\/\/ The rotated object has other dimensions \/\/ than the original image so for placing \/\/ it at the correct position, we have \/\/ \u200b\u200bto calculate the difference. <\/span>$diffx = (imagesx($objectRotated) – $objectWidth)\/2; <\/span>$diffy = (imagesy($objectRotated) – $objectHeight)\/2;<\/span><\/span><\/p>\n

\/\/ And copy it to our background. <\/span>imagealphablending($boximage, true); <\/span>imagecopyresampled($boximage, $objectRotated, $imageObject[‘left’]-$diffx, $imageObject[‘top’]-$diffy, 0, 0, imagesx($objectRotated), imagesy($objectRotated), imagesx($objectRotated ), imagesy($objectRotated));<\/span><\/span><\/p>\n

When using this code instead of the simple paste operation, one should think we would get a nicely rotated object and were finished with our little project. <\/span>But flush the image to the browser and you are going to get this:<\/span><\/span><\/p>\n

\"\"<\/span><\/span><\/p>\n

As you can plainly see, GD did us no favor and cropped the rotated object. <\/span>Sad, but that’s how it is. <\/span>I researched some other methods and even started writing my own rotate functionality, but getting this to work with nice interpolation would have gone beyond the constraints of the client’s project.<\/span><\/span><\/p>\n

So\u00a0 <\/span><\/span>ImageMagick<\/span><\/span><\/a> \u00a0to the rescue!<\/span><\/span><\/em><\/p>\n

Sadly, ImageMagick isn’t bundled with PHP, so you’ve got to install it first – but again, read the\u00a0 <\/span><\/span>comments to the PHP documentation<\/span><\/span><\/a> , which should get you going soon.<\/span><\/span><\/p>\n

Ready for the Magick?<\/span><\/span><\/h2>\n

We’re gonna work on the same foundation as before, so I’ll exclude the basic setup variables and jump straight into loading and resizing our background image.<\/span><\/span><\/p>\n

imagecreatefromstring<\/code>\u00a0becomes:<\/span><\/span><\/p>\n

\/\/ Load the background image into a \/\/ new ImageMagick object $boxImage = new Imagick($backgroundFile);<\/code><\/p>\n

And now the fun part: ImageMagick terrifically releases us of having to copy our object image around just for having it resized:<\/span><\/span><\/p>\n

\/\/ Load the object image with the new \/\/ dimensions applied $objectImage = new Imagick($objectFile); $objectImage->resizeImage($objectWidth, $objectHeight, Imagick::FILTER_LANCZOS, 1);<\/code><\/p>\n

Easy as that. <\/span>And copying an image onto another is just as straightforward:<\/span><\/span><\/p>\n

$boxImage->compositeImage($objectImage, imagick::COMPOSITE_DEFAULT, $imageObject['left'], $imageObject['top']);<\/code><\/p>\n

Grub first, then ethics.<\/span><\/span><\/h2>\n

Flushing the boxImage to the browser is done with a little more code than as with GD:<\/span><\/span><\/p>\n

\/\/ Flush the image to the browser header('Content-type: image\/jpeg'); $boxImage->setImageFormat('jpeg'); $boxImage->setImageCompressionQuality(100); echo $boxImage->getImageBlob();<\/code><\/p>\n

The function\u00a0 <\/span><\/span>getImageBlob<\/code>\u00a0returns the final image as a string, just as\u00a0 <\/span><\/span>imagejpeg<\/code>\u00a0does in GD. <\/span>With ImageMagick you just have to set the image format beforehand.<\/span><\/span><\/p>\n

\"\"<\/span><\/span><\/p>\n

It’s a wee bit cleaner than with GD, in my humble opinion, but that’s not the point. <\/span>Because when we now add a little rotation\u2026<\/span><\/span><\/p>\n

Flushing without blushing<\/span><\/span><\/h2>\n

\/\/ Rotate the Image - as simple as that $objectImage->rotateImage(new ImagickPixel('#00000000'), $imageObject['rotation']);<\/code><\/p>\n

\u2026 where\u00a0 <\/span><\/span>ImagickPixel<\/code>\u00a0creates the alpha channel for our image object. <\/span>We’ll get our final image – with no more cropped edges:<\/span><\/span><\/p>\n

\"\"<\/span><\/span><\/p>\n

Working with images in PHP is really nice with GD – but I think ImageMagick just sugar-coats the process.<\/span><\/span><\/p>\n

I’m a convert – will you be?<\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

ImageMagick straightens the skew Building a component for a client of our’s (Take on the Night) for merging some images together to get a kind of cut-out effect, at first I went straight to the known and \u201cbeloved\u201d GD-Library. About the struggles, that should follow, and why I jumped behind enemy lines (this is where […]<\/p>\n","protected":false},"author":25,"featured_media":3282,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[242],"tags":[278],"class_list":["post-3281","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-en","tag-revolving-resolve-magickaly-g-phpgdmagick"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/posts\/3281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/comments?post=3281"}],"version-history":[{"count":2,"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/posts\/3281\/revisions"}],"predecessor-version":[{"id":3291,"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/posts\/3281\/revisions\/3291"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/media\/3282"}],"wp:attachment":[{"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/media?parent=3281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/categories?post=3281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zensations.at\/en\/wp-json\/wp\/v2\/tags?post=3281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}