Overlapping Images with GD[转载]

Overlapping Images with GD by Chaos Zen

Introduction Often, tutorials covering the GD libraries and it's available functions in PHP will show how to overlay text onto images, manipulate images (resize, flip, rotate, etc) or how to dynamicly generate charts or graphs from numerical data. I have not seen many demonstrating how to combine images (or moreso, placing a transparent forground image over a background image). In this tutorial, I will demonstrate how to place an image over another image which may come in handy for many uses including, but not limited to: applying a signature or logo to a photo, adding a "watermark", placing an object onto a background or whatever else you might image useful.

Combining Images with GD

In this tutorial, we'll cover the basics of placing a foreground image onto a background image.

Here are some sample images.

background image (backgroundimage.png):

overlay image (overlayimage.png):

Combined, they will look like this:

The following code is used to achieve the overlay. Read through it; it's well commented.

// The header line informs the server of what to send the output   // as. In this case, the server will see the output as a .png   // image and send it as such   header ("Content-type: image/png");   // Defining the background image. Optionally, a .jpg image could   // could be used using imagecreatefromjpeg, but I personally   // prefer working with png   $background = imagecreatefrompng("backgroundimage.png");   // Defining the overlay image to be added or combined.   $insert = imagecreatefrompng("overlayimage.png");   // Select the first pixel of the overlay image (at 0,0) and use   // it's color to define the transparent color   imagecolortransparent($insert,imagecolorat($insert,0,0));   // Get overlay image width and hight for later use   $insert_x = imagesx($insert);   $insert_y = imagesy($insert);          // Combine the images into a single output image. Some people   // prefer to use the imagecopy() function, but more often than   // not, it sometimes does not work. (could be a bug)   imagecopymerge($background,$insert,0,0,0,0,$insert_x,$insert_y,100);   // Output the results as a png image, to be sent to viewer's   // browser. The results can be displayed within an HTML document   // as an image tag or background image for the document, tables,   // or anywhere an image URL may be acceptable.   imagepng($background,"",100);

Imagecopymerge explained

The imagecopymerge function works like this:

imagecopymerge(background or "destination" image, added or "source" image, int dst_x, int dst_y, int src_x, int src_y, int src_w, int src_h, int pct)

Imagecopymerge takes a part of the overlaid or "source" image, from src_x and src_y to a hight and width defined by scr_w and src_h. dst_x and dst_y are the x and y coordinates at which the top left corner of the overlaid image will begin. "pct" is the percent transparency of non-transparent areas of the overlaid "source" image.

For adding a faint logo over an art print to deter copying, try a pct number below 50, but high enough to be visible. For a solid image, such as placing a cropped image of a person onto a photo of an exotic location, try 100 for a solid image... or make them appear as a "ghost" using something like "40" or "50".

Try experimenting with the variables a bit to see how your results may vary. The image below was achieved by the combining of the same images as above, but using "50" for the value of "pct", instead of "100".

原文地址：
http://codewalkers.com/tutorials/78/1.html


这是一篇GD的基础文章，可以熟悉一下这些函数。
如果要将图添加到右下角
可以把imageCopyMerge改成这样：
$positionX = imagesX($background) * 0.70;
$positionY = imagesY($background) * 0.75;

imageCopyMerge($background, $insert, $positionX, $positionY, 0, 0, $insert_x, $insert_y, 100);