Adding one image to another image via script

[Pimpen 2010]

Ok. I have a script to add reviews to my site. I also have to option to add screenshots while I'm adding reviews.

I'm wondering how I can add a little image with my logo/website url to the bottom right corner to prevent people from taking my screenshots.

Like this (see attachment) as opposed to:

http://www.must-have-software.net/sc...ox%200.8_1.jpg

[littleFella]

Use ImageMagic (with PHP or other CGI interface). Available for both Windows and *nix platfroms:

http://www.imagemagick.org/

[littleFella]

btw. if you have no root access to your server you may opt for PHP's function:

imagecopymerge ( resource dst_im, resource src_im, int dst_x, int dst_y, int src_x, int src_y, int src_w, int src_h, int pct).

PHP needs to be compiled with the GD library of image functions for this to work. Most providers have that.

[Pimpen 2010]

Cool! Never knew that! Thanks man

BTW: My screenshots are all different sizes, if I speicify:

int dst_x
int dst_y

won't it be weird on some images?

[littleFella]

of course you'll have to test for sizes of both pictures (in code) before letting the code do the merge.
If destination is smaller than your "stamp" then you may resize the stamp, or change it's opacity, or both, or.. well, you get the idea.

[Pimpen 2010]

Hmmm, this seems comlicated...

How will I save the stamp image aswell with a low opacity? that won't work will it?

The only way I can think of to do this right is just applying the stamp to every screenshot that's taken...

[littleFella]

gotta go for a bit, so for now just high level code for you.

Let's define some variables. I like using "stamp" as the word for source image.


(int) SW - stamp_width
(int) SH - stamp_height

(int) PW - width of destination picture
(int) PH - height of destination picture


dest_x = PW - SW -5
dest_y = PH - SH - 5

Using dest_x and dest_y will place your stamp in bottom right corner of the destination graphics, such that there will be a 5 pixel margin between the right edge of the destination picture and the right edge of the stamp. Similar effect will occur for the bottom edges of the dest. picture and stamp.

Of course, kep in mind that you may ned to resize the stamp.

As for opacity, the last parameter of the function mentioned above is actually opacity value of the stamp image.



$opacity = 25;
ImageCopyMerge ($img_des, $img_src, 0, 0, 0, 0, $size[0], $size[1], $opacity);

Will copy two images of the same sizez onto each other with 25% opacity applied.

These are the meanings and function of individual parameters, with positional ordering.


1 = destination image
2 = source image
3 = x co-ordinate of the destination image to copy to
4 = y co-ordinate of the destination image to copy to
5 = x co-ordinate of the source image to start the copy from
6 = y co-ordinate of the source image to start the copy from
7 = how much of the source image in width to copy
8 = how much of the source image in height to copy
9 = opacity value

<edit: mistype>

[Pimpen 2010]

That makes it a lot easier.

Do you have a messenger of any sort so we can talk more?

Thanks a ton!
Phil

[littleFella]

wow!
I must warn you I barelly started with PHP, and I'm also an ugly s.o.b.

[Pimpen 2010]

That doesn't matter, just want to talk about how to get this code implemented on my site so my screenshots will start having that Logo/Url

[littleFella]

OK, this code is somewhat improved over what I sent you, but mostly in terms of clarity.

<?php
header ("Content-type: image/jpeg");
//assign picture to show
$filename = 'sample.jpg';
$img_des = ImageCreateFromJpeg ($filename);

//assign stamp picture
$filename2 = 'a.jpg';
$img_src = ImageCreateFromJpeg ($filename2);

//calc the size of the stamp image
$size = getimagesize($filename2);

//set opacity value of the stamp
$opacity = 15;

//set the margins size for the stamp image. Our stamp image is 50 by 50 pixels

// make sure this value is >= stamp width
// or else the stamp's right edge will be chopped
//Here we will have 60-50=10px margin to the right of the stamp
$rightmargin = 60;

// make sure the value is >= stamp height
// or else the stamp's bottom edge will be chopped
//Here we will have 60-50=10px margin rom the bottom of the stamp
$bottommargin = 60;

//merge the two images
ImageCopyMerge($img_des, $img_src, imagesx($img_des)-$rightmargin, imagesy($img_des)-$bottommargin, 0, 0, $size[0], $size[1], $opacity);

//display the image in browser
ImageJPEG ($img_des);

//destroy memory allocated to image handles
ImageDestroy ($img_src);
ImageDestroy ($img_des);
?>


This code is not a marvel, but as I said, I'm still trying to get the feel of that PHP thingie.
Also, bear in mind that this code will NOT modify any of the pictures used in the process. The stamp is dynamically superimposed onto the destination image and the result streamed to the browser without savin the modifications on the server.

Important: the PHP on the server must be compiled with GD library. Otherwise will error out with "function not found" message.

Sample pictures will look like this:

<edit: clarified comments on margins>

[Pimpen 2010]

Thanks a TON man!

Originally Posted by littleFella

Also, bear in mind that this code will NOT modify any of the pictures used in the process. The stamp is dynamically superimposed onto the destination image and the result streamed to the browser without savin the modifications on the server.

So the images really dont have that stamp if lookin at them through FTP? And if people save the image, it'll have the stamp, correct?

[littleFella]

Originally Posted by Pimpen 2010

So the images really dont have that stamp if lookin at them through FTP? And if people save the image, it'll have the stamp, correct?

That's correct. In order to achieve that you would have to use ImageMagic functions in the following manner:

1. merge pictures
2. delete/move unstamped destination picture.

ImageMagic is available for Linux (of course) and is free.. You need to use command line functions in PHP to be able to do it.

[Pimpen 2010]

Cool. You have been a big help :cool:

Now I just need to get my coder to impliment this

[littleFella]

That's pretty much implemented, just ask him to turn it into a function. Don't be shy when it's done. Brag all you want. I'd be glad to see the final result.

[Pimpen 2010]

I'll make sure to post here.

I'm making a contributors section on my links page, would you like me to add a link to your site? for the wonderful help?

[littleFella]

Originally Posted by Pimpen 2010

I'll make sure to post here.

I'm making a contributors section on my links page, would you like me to add a link to your site? for the wonderful help?

1. I am still scrathing my head here. The idea being this:

If you run that code dynamically everytime someone looks at the picture then it means more resources required by the server. So I thought that perhaps I would play with it some more and do it this way:

- get a picture from iuser (via browser upload)
- modify it immediatelly after the upload to include the stamp.
- delete (or move elsewhere) the originally uploaded image

I can't promise I'll do it anytime soon though. Still, at the very least you got what you got now.

Also, it appears that PHP has this function:
imagejpeg ( resource image [, string filename [, int quality]])

It allows to save the image to a file, which would solve your ftp worry, and no need to install ImageMagic.

2. I have to revamp my site a bit (it's attrocious right now), and I will gladly accept the offer. Thanks.

[Pimpen 2010]

NP, Thank you for the help.

No rush for that. I'll be adding them manually for now, until the one you gave me gets put in the coding, then I'll switch to the one you're talking about now.

[littleFella]

OK, got your ftp situation somewhat solved:
I am including only a portionof code, with the first statement unchanged to give you a better hint as to what changed and where to start copy/paste.
This is a first shot at it, appears to work.

//merge the two images
ImageCopyMerge($img_des, $img_src, imagesx($img_des)-$rightmargin, imagesy($img_des)-$bottommargin, 0, 0, $size[0], $size[1], $opacity);

// changes start below

//display the image in browser
//ImageJPEG ($img_des); <--- commented out to make sure new image is displayed from file

//make a copy of the image file to include the stamp
//this will write a new merged image to a file called stamped.jpg
//the last parameter stands for image jpg quality expressed in %
imagejpeg ($img_des, "stamped.jpg" ,100);

//delete unstamped image file
//note: make yourself a copy of the unstamped file for testing purposes.
//cuz after this operation it's gone forever (well, kinda)
unlink($filename);

//alternativelly the original file ay be moved to a different dir by using this code:
//move_uploaded_file ( string filename, string destination)

//reassign image to display the newly created stamped image
//I'm a bit lazy so I am resuing variable names here.
//Actually this will make it possible to leave the last 2 lines
//of this code intact, without the need to add more
//destruction statements
// use caution with this type of approach
$filename = "stamped.jpg";
$img_des = ImageCreateFromJpeg ($filename);
ImageJPEG ($img_des);

// end of changes

//destroy memory allocated to image handles
ImageDestroy ($img_src);
ImageDestroy ($img_des);

?>

Note:
as opposed to the first code (where you need to run it every time the picture needs to be displated), this code needs to run once only - right after the destination image is uploaded to the server. That will save a bunch of CPU time and memory on the server.


<edit:
1. Added comment with ooption to mv instead of rm.
2. added a note>

[Pimpen 2010]

Thanks, I'll make sure to send this to my coder