Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Senior Coder
    Join Date
    Apr 2005
    Location
    Colorado, United States
    Posts
    1,208
    Thanks
    0
    Thanked 0 Times in 0 Posts

    GD - Overlay Watermark

    This code overlays a watermark (transparent or not) on to an image using the GD image library. This code would be useful for websites that commonly have pictures uploaded to them and wish to overlay a watermark over them, as this code can be called in a url, thus from img tags. Such as image.php?image=uploaded-343223.jpg. The position of the watermark starts from the bottom right corner, and the offset can easily be configured with the $w_offset and $h_offset variables below.

    PHP Code:
    <?php
    // Velox Letum (2005)
    // elementation@gmail.com
     
    $image $HTTP_GET_VARS['image']; // Useful if using in an img tag to call images
    $image str_replace(array("/"".."), ""$image); // Prevent abuse
    $overlay 'overlay.png';
    $dir '../hresources/';
     
    // A default image for the demo...remove if you wish.
    if ($image == NULL) {
        
    $image 'donutland.jpg';
    }
     
    // Find if image exists
    if (!file_exists($dir $image)) {
        die(
    "Image does not exist.");
    }
     
    // Set offset from bottom-right corner
    $w_offset 0;
    $h_offset 0;
     
    $extension strtolower(substr($imagestrrpos($image".") + 1));
     
    // Load image from file
    switch ($extension)
    {
        case 
    'jpg':
            
    $background imagecreatefromjpeg($dir $image);
            break;
        case 
    'jpeg':
            
    $background imagecreatefromjpeg($dir $image);
            break;
        case 
    'png':
            
    $background imagecreatefrompng($dir $image);
            break;
        case 
    'gif':
            
    $background imagecreatefromgif($dir $image);
            break;
        default:
            die(
    "Image is of unsupported type.");
    }
     
    // Find base image size
    $swidth imagesx($background);
    $sheight imagesy($background);
     
    // Turn on alpha blending
    imagealphablending($backgroundtrue);
     
    // Create overlay image
    $overlay imagecreatefrompng($dir $overlay);
     
    // Get the size of overlay
    $owidth imagesx($overlay);
    $oheight imagesy($overlay);
     
    // Overlay watermark
    imagecopy($background$overlay$swidth $owidth $w_offset$sheight $oheight $h_offset00$owidth$oheight);
     
    // Output header and final image
    header("Content-type: image/jpeg");
    header("Content-Disposition: filename=" $image);
    imagejpeg($background);
     
    // Destroy the images
    imagedestroy($background);
    imagedestroy($overlay);
     
    ?>
    Last edited by Velox Letum; 11-12-2005 at 12:41 AM.
    "$question = ( to() ) ? be() : ~be();"

  • #2
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    A short description of what this code does and in what setting would really help.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #3
    Senior Coder
    Join Date
    Apr 2005
    Location
    Colorado, United States
    Posts
    1,208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My apologies, I will be sure to include a description and possible use for scripts in which they are not readily apparent.
    "$question = ( to() ) ? be() : ~be();"

  • #4
    New Coder
    Join Date
    Feb 2005
    Location
    Wasilla, Alaska
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up thankyou!

    OMG, thank you so much, you have no idea how long I've been search for a tutorial / script that i can use on my site. This has helped me so much! I really appreciate the snippet you have provided.
    trying to revive an old site...

  • #5
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just so you know..
    PHP Code:
    $image imagecreatefromstring(file_get_contents('path/to/image.jpg')); 
    ..removes the need for nasty switch statements.

  • #6
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by trib4lmaniac
    Just so you know..
    PHP Code:
    $image imagecreatefromstring(file_get_contents('path/to/image.jpg')); 
    ..removes the need for nasty switch statements.
    But also slows down the script (possibly a fair bit based on the image), so I would reccomend going with the switch statement.

  • #7
    Senior Coder
    Join Date
    Apr 2005
    Location
    Colorado, United States
    Posts
    1,208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mindless
    OMG, thank you so much, you have no idea how long I've been search for a tutorial / script that i can use on my site. This has helped me so much! I really appreciate the snippet you have provided.
    Glad to help. And that's why I used the switch statements, because imagecreatefromstring() really slowed it all down, especiallly when testing with 2048x1538 pixel images.
    "$question = ( to() ) ? be() : ~be();"

  • #8
    New Coder
    Join Date
    Mar 2007
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi all

    I know this was posted a long time ago by Velox Letum but i am after something very similar to this as i require a watermarked image that will overlay the whole page.

    Having read the post i do not fully understand what is required to be able to use it and where i would put the folders.

    Any advice would be great and of huge benifit to me.

    Thanks


    Richard

  • #9
    Super Moderator Inigoesdr's Avatar
    Join Date
    Mar 2007
    Location
    Florida, USA
    Posts
    3,638
    Thanks
    2
    Thanked 404 Times in 396 Posts
    Pretty much just PHP, and GD2. You'll probably want to use imagecopyresampled instead of imagecopy. That original script looks like he was keeping the images out of publicly accessible areas and watermarking them on-the-fly as they load in his webpages. That could put a large amount of stress on your server if you have more than a couple of images.

  • #10
    Regular Coder
    Join Date
    Sep 2007
    Location
    Grahamstown, South Africa
    Posts
    237
    Thanks
    6
    Thanked 17 Times in 17 Posts
    Instead of using a extention, cant you use getimagesize? eg.
    PHP Code:
    $params getimagesize($image) or die("File not found or supported");
    switch(
    $params[2]){
    //1- gif
    //2-jpeg
    //3-Png

    This would also mean that imagesx and imagesy would not have to be invoked as $params[0] and $params[1] would be their equivalents. Also the first check (!file_exists) is also redundant as getimagesize returns false if the selected file isnt a valid image or not found.

    Im not sure if Im making any sense? Send me back to the loony bin someone.
    Last edited by idalatob; 09-18-2007 at 01:43 PM.

  • #11
    Super Moderator Inigoesdr's Avatar
    Join Date
    Mar 2007
    Location
    Florida, USA
    Posts
    3,638
    Thanks
    2
    Thanked 404 Times in 396 Posts
    Yes, you could use getimagesize() instead.

  • #12
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centred watermark

    Thanks for the tips on this page guys. This version does (should do) the following:

    1. Load the image and scale it to a given maximum dimension.
    2. Load the watermark file
    3. Work out the width of the image and the watermark and apply the watermark centrally
    4. Create a thumbnail without a watermark but scaled to a given maximum dimension.
    5. Save out both thumbnail and watermarked images to file.
    6. Delete the orginal file.

    I did it for me and my needs but it should be pretty easy to tweak.
    Might help anyone putting up an image library ...

    PHP Code:
    <?php

    function waterMarkImage($catalogueRef$imageName '') {
     
    $watermarkSrc dirname(__FILE__) . '/spc_watermark.png';
    $sourceDir dirname(__FILE__) . '/tmp/';
    $thumbnailDir dirname(__FILE__) . '/../images/thumbs/';
    $outputDir dirname(__FILE__) . '/../images/large/';
    $maximumDimension 500// max image dimension
    $maximumThumbnail 200// max thumbnail dimension
    if ($imageName == '') {
        
    $imageName $catalogueRef ".jpg";
    }
        
    $rawImage imagecreatefromjpeg($sourceDir $imageName);
     
    // ======================================================================== Find base image size & scale down to a max of 500px

    $rawWidth imagesx($rawImage);
    $rawHeight imagesy($rawImage);

    $imageScaleTo 1;


    if (
    $rawWidth >= $rawHeight) { // if a landsscape or square image

        
    if ($rawWidth $maximumDimension) {
            
    $imageScaleTo $maximumDimension/$rawWidth;
        }
        
    // scale thumbnail
            
    $thumbNailScale $maximumThumbnail/$rawWidth;
            
    $thumbNailWidth $maximumThumbnail;
            
    $thumbNailHeight floor($rawHeight $thumbNailScale);
            
    $thumbNailImage imagecreatetruecolor($thumbNailWidth$thumbNailHeight);
            
    imagecopyresampled($thumbNailImage$rawImage0000$thumbNailWidth$thumbNailHeight$rawWidth$rawHeight);

    } else { 
    // if a portrait image

        
    if ($rawHeight $maximumDimension) {
            
    $imageScaleTo $maximumDimension/$rawHeight;
        }
        
    // scale thumbnail
            
    $thumbNailScale $maximumThumbnail/$rawHeight;
            
    $thumbNailWidth floor($rawWidth $thumbNailScale);
            
    $thumbNailHeight $maximumThumbnail;
            
    $thumbNailImage imagecreatetruecolor($thumbNailWidth$thumbNailHeight);
            
    imagecopyresampled($thumbNailImage$rawImage0000$thumbNailWidth$thumbNailHeight$rawWidth$rawHeight);

    }
     
    // ======================================================================== Create Output Image

    $outputWidth floor($rawWidth $imageScaleTo);
    $outputHeight floor($rawHeight $imageScaleTo);

    $outputImage Imagecreatetruecolor($outputWidth$outputHeight);
    imagecopyresampled($outputImage$rawImage0000$outputWidth$outputHeight$rawWidth$rawHeight);

    // Turn on alpha blending
    imagealphablending($outputImagetrue);
     
    // Create overlay image
    $watermark imagecreatefrompng($watermarkSrc);
     
    // Get the offset centring for the overlay
    $offsetWidth floor(($outputWidth imagesx($watermark))/2);
    $offsetHeight floor(($outputHeight imagesy($watermark))/2);
     
    // Overlay watermark
    imagecopy($outputImage$watermark$offsetWidth$offsetHeight00imagesx($watermark), imagesy($watermark));
     
    // Output header and final images to file
    imagejpeg($outputImage$outputDir $catalogueRef ".jpg");
    imagejpeg($thumbNailImage$thumbnailDir $catalogueRef ".jpg");
     
    // Destroy the images
    imagedestroy($outputImage);
    imagedestroy($thumbNailImage);
    imagedestroy($rawImage);
    imagedestroy($watermark);

    // clean up temp

    unlink($sourceDir $imageName);

    }

    ?>
    Last edited by simon@vg; 10-19-2007 at 02:51 PM. Reason: Unclear writing

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,453
    Thanks
    0
    Thanked 632 Times in 622 Posts
    Quote Originally Posted by Velox Letum View Post
    Glad to help. And that's why I used the switch statements, because imagecreatefromstring() really slowed it all down, especiallly when testing with 2048x1538 pixel images.
    Any particular reason why you set up separate code for jpg and jpeg rather than placing both labels in front of the same code block.

    Code:
        case 'jpg':
        case 'jpeg':
            $background = imagecreatefromjpeg($dir . $image);
            break;
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #14
    Senior Coder
    Join Date
    Apr 2005
    Location
    Colorado, United States
    Posts
    1,208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Any particular reason why you set up separate code for jpg and jpeg rather than placing both labels in front of the same code block.

    Code:
        case 'jpg':
        case 'jpeg':
            $background = imagecreatefromjpeg($dir . $image);
            break;
    I couldn't say. It was so long ago I can hardly remember why I'd done a few things the way I did.
    "$question = ( to() ) ? be() : ~be();"

  • #15
    Regular Coder
    Join Date
    Nov 2006
    Posts
    246
    Thanks
    13
    Thanked 26 Times in 24 Posts
    For anyone who may want it, here's a way to tile watermark the whole image:

    Replace:
    PHP Code:
    // Overlay watermark
    imagecopy($background$overlay$swidth $owidth $w_offset$sheight $oheight $h_offset00$owidth$oheight); 
    With:
    PHP Code:
    // Overlay watermark
    $x 0;
    $y 0;
    $opacity 100// overlay's opacity (in percent)
    while ($sheight $y)
    {
        
    imagecopymerge($background$overlay$x$y00$owidth$oheight$opacity);

        if (
    $x $swidth) {
            
    $x $x $owidth;
        }
        else if (
    $x >= $swidth) {
            
    $x 0;
            
    $y $y $oheight;
        }

    I like imagecopymerge better because you can control the opacity of the overlay. If you still wanna use imagecopy though, just change it, and take out the opacity parameter. If the opacity is 100%, it's identical to imagecopy anyway.
    Last edited by Majoracle; 11-20-2007 at 10:43 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •