Jump to content

(General) PHP image manipulation


SamC
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 by horst
added a more useful approach
  • Like 4
  • Thanks 1
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...