Home arrow Miscellaneous arrow Page 7 - Adding Drop Shadows with PHP

Adding Drop Shadows with PHP
By: bluephoenix
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 12

    Table of Contents:
  • Adding Drop Shadows with PHP
  • Setting the Shadow Options
  • Opening the Canvas
  • Allocating the Color Pallette
  • Drawing on the Canvas
  • Overlay the Original
  • Combined Code



    Adding Drop Shadows with PHP - Combined Code

    (Page 7 of 7 )

    Here is the complete script:

    /* set drop shadow options */

    /* offset of drop shadow from top left */
    define("DS_OFFSET",  5);
    /* number of steps from black to background color /*
    define("DS_STEPS", 10);

    /* distance between steps */

    /* define the background color */
    $background = array("r" =&gt255"g" =&gt255"b" =&gt255);

    $src = isset($_REQUEST['src']) ? urldecode($_REQUEST['src']) : null;
    $src) &amp;&ampfile_exists($src)) {

    /* create a new canvas.  New canvas dimensions should be larger than the original's */
    list($o_width$o_height) = getimagesize($src);
    $width  $o_width DS_OFFSET;
    $height $o_height DS_OFFSET;
    $image imagecreatetruecolor($width$height);

    /* determine the offset between colors */
    $step_offset = array("r" =&gt; ($background["r"] / DS_STEPS), "g" =&gt; ($background["g"] / DS_STEPS), "b" =&gt; ($background["b"] / DS_STEPS));

    /* calculate and allocate the needed colors */
    $current_color $background;
      for (
    $i 0$i &lt;= DS_STEPS$i++) {
    $colors[$i] = imagecolorallocate($imageround($current_color["r"]), round($current_color["g"]), round($current_color["b"]));

    $current_color["r"] -= $step_offset["r"];
    $current_color["g"] -= $step_offset["g"];
    $current_color["b"] -= $step_offset["b"];

    /* floodfill the canvas with the background color */

    /* draw overlapping rectangles to create a drop shadow effect */
    for ($i 0$i &ltcount($colors); $i++) {
    $width -= DS_SPREAD;
    $height -= DS_SPREAD;

    /* overlay the original image on top of the drop shadow */
    $original_image imagecreatefromjpeg($src);

    /* output the image */
    header("Content-type: image/jpeg");
    /* clean up the image resources */

    And here is a sample of generated output:


    The process for adding a drop shadow dynamically is pretty straightforward. A slightly larger image is created, the shadow is drawn to the new canvas and then the original image is overlaid. The resulting image is then sent back to satisfy the content request made by the browser.

    The material presented here has room for many modifications and extensions. For example, you could make the script more flexible by using a constant to determine the shadow's angle, or perhaps even consider other methods of drawing a shadow. Your exploration doesn't have to end with this tutorial.

    About The Author

    Timothy Boronczyk lives in Syracuse, NY, where he works as an E-Services Coordinator for a local credit union. He has a background in elementary education, over 5 years experience in web design and has written tutorials on web design, PHP, Ruby, XML and various other topics. His hobbies include photography and composing music.

    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
    blog comments powered by Disqus


    - Attention: Forum and Site Maintenance
    - 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

    Developer Shed Affiliates


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