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 include, but not limited to: applying a signature or logo to a photo, adding a "watermark", Placing An Object Onto A Background Or Whate Else You Might Image Useful.
Combining images with GD
In this Tutorial, We'll Cover The Basics of Placing A Foreground Image.
Here Are Some Sample Images.
Background Image (BackgroundImage.png):
Overlay Image (OverlayImage.png):
Combined, They Will Look Like this:
The following code is buy. 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 ($ IMAGERT, 0)); // Get overlay image width and high for lating us $ INSERT_X = Imagesx ($ INSERT); $ INSERT_Y = ImageESY ($ INSERT); // Combine The images Into a single Output Image. Some people // prefer to use the Imagecopy () Function, But More Offen Than // Not, IT Sometimes Does Not Work. (Could Be A Bug) Image CopyMerge ($ 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 Wtem 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 of a Person ONTO A Photo of An Exotic Location, Try 100 for a Solid Image ... Or Make The Appear as a "ghost" 50 "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".
Original address:
http://codewalkers.com/tutorials/78/1.html
This is a GD's basic article that can be familiar with these functions.
If you want to add a picture to the lower right corner
You can change ImageCopyMerge this:
$ POSITIONX = ImageSX ($ background) * 0.70; $ positiony = imagesy ($ background) * 0.75;
ImageCopyMerge ($ BACKGROUND, $ INSERT, $ POSITIONX, $ PositionY, 0, 0, $ INSERT_X, $ INSERT_Y, 100);
