(General) PHP image manipulation

[SamC]

I'm looking to combine two images into a single one and could do with some advice, or just where to start tbh.

Image 1 (base): 600px x 400px
Image 2 (will change): 80px x 100px
Result: Image 3, which is image 1 with image 2 overlayed, offset x,y (50px, 50px from top left)

Now, I guess I have two options, take image 1, and place image 2 on top of it, or make part of image 1 transparent, and put image 2 underneath. Image 1 will be a base image, and image 2 will change for each new generated image (image 3). Think of galleries of web design that have a macbook 'frame' around images. That sort of thing. I'm not sure a CSS solution would be robust enough here, too many things could go wrong with positioning. So I was looking at physically making a third image from the original two.

I've read a few posts about using imagemagick and a few using GD but just after suggestions here on how to go about something like this?

Any advice would be awesome, thanks.

[horst]

Hi Sam,

there is PageimageManipulator available for PW:

With it you can do something like:

$imageBase = // get the base image here
$imageOverlay = // get the thumbnail overlay image here

// first wrap a 50px transparent (rgba) canvas around the overlay image and convert it to png format:
$imageOverlay = $imageOverlay->pim2Load("prefix")->canvas($imageOverlay->width + 100, $imageOverlay->height + 100, array(0,0,0,0), "center")->setOutputFormat("png")->save();

// now stretch the overlay image canvas to match the base image dimensions:
$imageOverlay = $imageOverlay->pim2Load("prefix")->canvas($imageBase->width, $imageBase->height, array(0,0,0,0), "northwest")->save();

// now merge both images together
$imageResult = $imageBase->pim2Load("prefix")->watermarkLogo($imageOverlay, "center", 0)->save();

// The resulting pageimage can also be adjusted using regular pw image functions, if necessary
$imageResultThumb = $imageResult->width(150);

 

Better is to chain the manipulations of the overlay image into one call:

$imageBase = // get the base image here
$imageOverlay = // get the thumbnail overlay image here

// two steps to create the canvas with the thumb at the desired position and convert the output to png format:
$imageOverlay = $imageOverlay->pim2Load("prefix")->setOutputFormat("png")->canvas($imageOverlay->width + 100, $imageOverlay->height + 100, array(0,0,0,0), "center")->canvas($imageBase->width, $imageBase->height, array(0,0,0,0), "northwest")->save();

// now merge both images together
$imageResult = $imageBase->pim2Load("prefix")->watermarkLogo($imageOverlay, "center", 0)->save();

 

Please refer to the PageimageManipulator page for the documentation of all methods and params, but ask here, if something is not clear. ?

 

Edited December 10, 2018 by horst
added a more useful approach

[SamC]

Wow, thanks @horst that's an awesome reply! Nice one ?

I'm also looking for something similar for an app outside PW. I found http://image.intervention.io/ which I tried out locally. Seemed to do the job pretty well but I know next to nothing about image manipulation.

Does anyone still use just plain ol' GD(2) anymore?

[bernhard]

I've used Nette image functions for that once I needed it: https://doc.nette.org/en/2.4/images#toc-image-modification but your linked library looks more advanced ? 

[SamC]

@bernhard I was just looking at https://doc.nette.org/en/2.4/dependency-injection and the instructions are remarkably well explained. Just learned a bunch of stuff reading that.