Image Merge

See the sample site. I need to "merge" the two images so that the picture of the boy is overlyed with the frame, with the inner part of the frame transparent & the outer part overcovering the "edge" portions of the picture.

At the moment, the Pticture of the boy is a jpg & the frame is a transparent gif. I can make the frame a jpg.

Is there a way to do this using the php image functions, or, if not, using something else?
Richard KortsAsked:
Who is Participating?
steelseth12Connect With a Mentor Commented:
Try this

 //soource image change accordingly
$image = imagecreatefromjpeg("myimage.jpg");      

//overlay image change accordingly
$overlay = imagecreatefromgif("imgoverlay.gif");

// Get X and Y size of existing image
$width = imagesx($image);
$height = imagesy($image);

// Get X and Y size of overlay
$width_o = imagesx($overlay);
$height_o = imagesy($overlay);

//Set X & Y  of overlay image
$new_width = $width_o ;
$new_height = ($height * ($new_width/$width)) ;

//Get destination coordinates
$dst_w = round(($width_o - $new_width)/2);
$dst_h = round(($height_o - $new_height)/2);
//create new image
$image_resized = imagecreatetruecolor($width_o, $height_o);

//allocate color
$bg = imagecolorallocate($image_resized,255,255,255);

//fill image with white background
imagefilledrectangle($image_resized, 0, 0, $width_o , $height_o , $bg);

//copy source image to new image
imagecopyresampled($image_resized, $image, $dst_w, $dst_h , 0, 0, $new_width, $new_height, $width, $height);

//copy new image to overlay
imagecopy($image_resized, $overlay, 0,0,0,0,$width_o,$height_o);


Richard KortsAuthor Commented:
To steelseth12:

EXCELLENT! The only thing that didn't work from your php was: imagejpeg($image_resized);, that produces a bunch of gibberish characters in the browser. But no issue, I just saved it to a file & displayed the file in the browser.
Glad i could help.
For imagejpeg() to work correctly i would need no other data to be outputed to the browser .... so the browser sees the file as an image ..

Normally the way i do it is put all the image creation code in a file by itself and then give it as a source to the <img> tag


<img src='create_image.php'>
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Richard KortsAuthor Commented:
To steelseth12,

So there is another thing I perhaps did NOT address in the original question. I'll put it here, in case you can answer directly, but what I need is to be able to "blot out" all aspects of the original image that are OUTSIDE the overlay frame. Think of the overlay as a picture frame, we want the excess outside the frame cut off. I can of course make the outside black or a light gray or ?? but any color other than white will look strange.

If you want I will start a new question & you can look for it. I'll put it in the same categories, etc.

Let me know.


Why not make the outsite of the border white
There are ways to calculate it in php but it requires alot of work and it will put unnecessary strain on the server.
Richard KortsAuthor Commented:
To steelseth12,

I got the image, thanks. But the inside is now black. Don't I have to change something in the php code?


Black ? No you shouldnt have to change anything ... it displays fine on my local host.

Thats strange ... try it with a png


$overlay = imagecreatefromgif("imgoverlay.gif");
$overlay = imagecreatefrompng("imgoverlay.png");
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.