Miscellaneous

  Home arrow Miscellaneous arrow Page 2 - Overlapping Images with GD
MISCELLANEOUS

Overlapping Images with GD
By: Codewalkers
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 8
    2004-09-18

    Table of Contents:
  • Overlapping Images with GD
  • Combining Images with GD
  • Imagecopymerge explained

  •  
     

    SEARCH CODEWALKERS

    TOOLS YOU CAN USE

    advertisement

    Overlapping Images with GD - Combining Images with GD


    (Page 2 of 3 )

    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("overlay.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); 

    More Miscellaneous Articles
    More By Codewalkers

    blog comments powered by Disqus

    MISCELLANEOUS ARTICLES

    - Oracle Database XE: Indexes and Sequences
    - Modifying Tables in Oracle Database XE
    - Oracle Database XE: Tables and Constraints
    - More on Oracle Databases and Datatypes
    - Oracle Database XE Datatypes: Datetime and L...
    - Oracle Database XE Datatypes: Character and ...
    - From Databases to Datatypes
    - Firefox 3.6.6 Released with Improved Plug-in...
    - Attention Bloggers: WordPress 3.0 Now Releas...
    - Reflection in PHP 5
    - Inheritance and Other Advanced OOP Features
    - Advanced OOP Features
    - Linux from Scratch V.6.6 Review
    - Linux Gaining in Strength
    - Install Slackware on Your Old PC


    © 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap