I am searching for a way to overlay an image on an existing image.

e.g:

+

I have found a great example over here: PNG overlay using one single Image element. but I have two problems with these.

First of all, I don't want the dimensions to be equal to each other. e.g (215*215 on 215*215). This is because my users would have the ability to choose where they want to put their image. (Top, left, bottom, top-right) so 8 directions.

The second problem is that in that example, only 2 images are allowed to overlay. My users (again) will have the ability to put multiple images on top of it.

I have a little knowledge of Javascript and PHP, so it would be great if you guys (and girls) could help me out.

Sincerely,

I am searching for a way to overlay an image on an existing image.

e.g:

+

I have found a great example over here: PNG overlay using one single Image element. but I have two problems with these.

First of all, I don't want the dimensions to be equal to each other. e.g (215*215 on 215*215). This is because my users would have the ability to choose where they want to put their image. (Top, left, bottom, top-right) so 8 directions.

The second problem is that in that example, only 2 images are allowed to overlay. My users (again) will have the ability to put multiple images on top of it.

I have a little knowledge of Javascript and PHP, so it would be great if you guys (and girls) could help me out.

Sincerely,

• php
• javascript

• 1 What is the relevance of Javascript and PHP? Have you decided that you need to use these technologies? Either? Both? Is that a requirement, or did you just assume that the solution will involve one or both of them? – Lightness Races in Orbit Commented Jul 1, 2011 at 12:15
• Also you've not provided any context at all. Is this to go on a website? Do you need to do this dynamically to arbitrary images, or just once to a single image? You say "their image" as if "[your] users" are uploading these images, but give no specifics as to what your system is supposed to do. – Lightness Races in Orbit Commented Jul 1, 2011 at 12:16
• possible duplicate of Positioning and overlaying image on another image – mplungjan Commented Jul 1, 2011 at 12:18
• Ok, I'm sorry for this less information. I'm creating an app on android that streams snapshots to my webserver (a website). It works with a POST Method (PHP) that receives the correct details. Javascript is needed to reload my images every 750 milliseconds. Now, my users (on the android platform) has the ability to select an image in their SD card directory and it's send to the webserver. An example is like on tv. Showing the name when you are live from a person, or showing an image or something. It could be multiple images on 1 single image. I assumed the solution is both of them? – Verhelst Commented Jul 1, 2011 at 12:29

1 Answer 1

You can do this using GD library. There is function to "merge" images called imagecopymerge.

Here is a very simple example how to merge images:

<?php
header('Content-Type: image/jpeg');

$bg = imagecreatefromjpeg('background.jpg');
$img = imagecreatefromjpeg('image.jpg');

imagecopymerge($bg, $img, 0, 0, 0, 0, imagesx($bg), imagesy($bg), 75);

imagejpeg($bg, null, 100);
?>