Hi; I want to "paste" a "label" on images (on the fly, of course) but I always wind up in a muddle when dealing with the various php image...() type functions.

I'm thinking I need to add the
imagefilledrectangle() and/or
imagettfbbox()
functions somehow but not clear on exactly how.

The following works fine to just impose colored text directly on the image, but the part I am having difficulty with is putting an appropriately-sized white (or, hopefully translucent white) box between the image and the text to make it look like a label and/or to improve readability when the image colors are too close to the text color.

//this part works.
  //Set the Content Type 
  header('Content-type: image/jpeg');
  $jpg_image = imagecreatefromjpeg('pictures/PICTURENAME.jpg'); // Create Image From Existing File
  $white = imagecolorallocate($jpg_image, 255, 255, 255);
  $red =  imagecolorallocate($jpg_image, 255, 0, 0); // Allocate A Color For The Text
  $font_path = 'fonts/arialbd.ttf';  // Set Path to Font File
  $text ="OPEN\nSaturday, February 14th\n12:00~1:30pm";  //Text to Be Printed On Image

imagettftext($jpg_image, 40, 0, 75, 200, $red, $font_path, $text); // Print Text On Image

// Send Image to Browser
imagejpeg($jpg_image);
// Clear Memory
imagedestroy($jpg_image);

having the text box set at a jaunty angle (ie. 20 degrees) would be cool too.

Not sure if I will want to save the output to a file, but I think I know how to do that part once the image is generated properly.

I know I can do an overlay with <span> that accomplishes the same thing, but I want to use the resulting image as a clickable image that takes the visitor elsewhere, and the <span> over the image seems to become a dead/unclickable zone.

Thanks!

    Another alternative that avoids having to manipulate the image is to use an <a> element instead of a <span> for the overlay, and have it point to the same place as the image.

      I'm currently rebuilding my website after my server room got flooded, or I would just link you to my site. But I'll copy paste below a tutorial I made on watermarking. I wrote this a long time ago, so feel free to ask questions if it makes no sense. Also, this assumes the watermark is a premade image, however it could be a dynamically generated image just as easily. Hope it helps.


      I find when opening files it generally works better if you use full paths instead of relative paths as it makes it easier to update your folder structure. Of course this is personal preference, however, the way I choose to do it is dirname() with the FILE constant as the argument. I then set the path with filename for the image and the watermark.

      $folder = dirname(__FILE__) . DIRECTORY_SEPARATOR;
      $base = $folder . 'base.jpg';
      $watermark = $folder . 'watermark.png';
      

      Next we need to get the dimensions of the image and watermark to determine how big the watermark should be. We get the dimensions via getimagesize, then assign them to their own variables using the list function.

      list($basew,$baseh) = getimagesize($base);
      list($wmw,$wmh) = getimagesize($watermark);
      

      For this tutorial, I want the watermark to be no bigger than half the width or height of the base image. So I determine which is less and then create a scale based on that. I then multiply the scale by the watermark’s measurements to determine what the size of the watermark should be on the image itself.

      if( $basew > $baseh ) {
      	$wmscale = ($basew/2)/$wmw;
      } else {
      	$wmscale = ($baseh/2)/$wmh;
      }
      $newwmw = $wmw*$wmscale;
      $newwmh = $wmh*$wmscale;
      

      Next we need to resize the watermark to the proper scale to put it on the image. We start by creating two images, one from the original watermark, and one the size of the new watermark. We open the original watermark using imagecreatefrompng and the new watermark using imagecreate and the new dimensions. We then use imagecopyresized to copy the watermark and scale it into the new watermark and destroy the opened original watermark. Note: it merely destroys the resources used by opening the file it does NOT remove it from the file system.

      $wmimg = imagecreatefrompng($watermark);
      $newwmimg = imagecreate($newwmw,$newwmh);
      imagecopyresized($newwmimg,$wmimg,0,0,0,0,$newwmw,$newwmh,$wmw,$wmh);
      imagedestroy($wmimg);
      

      For this tutorial we are placing the watermark in the center of the image, so we need to determine where watermark will be placed. The offset is determined as the distance along the x-axis and y-axis with the point of origin being the top left corner. So we will open the base image using imagecreatefromjpeg, calculate the x and y offsets to use, copy the watermark to the proper spot on the image, and destroy the watermark.

      $baseimg = imagecreatefromjpeg($base);
      $dst_x = ($basew/2) - ($newwmw/2);
      $dst_y = ($baseh/2) - ($newwmh/2);
      imagecopy($baseimg,$newwmimg,$dst_x,$dst_y,0,0,$newwmw,$newwmh);
      imagedestroy($newwmimg);
      

      Finally, we output the image header, the image itself and then destroy the image to free up the final resources. It is important to note that we always destroy the resources we open so they don’t get left behind.

      header('Content-type: image/png');
      imagepng($baseimg);
      imagedestroy($baseimg);
      

      Now we can obviously alter this so that it works for more than just one picture. For example if you want to store filenames in a database, you could pass an image ID via a query string, and then look up that particular image in the script. Also this would be called within an html tag, and would be the target src IE: <img src=”watermark.php” /> or when choosing an image via query string: <img src=”watermark.php?image=123” />.

        Weedpacket;11045273 wrote:

        Another alternative that avoids having to manipulate the image is to use an <a> element instead of a <span> for the overlay, and have it point to the same place as the image.

        I tried this at your suggestion as it seems like a very easy solution that gets me REAL close to the effect I am looking for, BUT, it does not quite seem to work...I think because to put this <a> tag in place to display pasted on the image/submit button places it inside the <form> tags...and when clicked it does not seem to go anywhere. (the form carries a couple hidden values to the subsequent page so that the correct event will be displayed within a specific section, and I tried to reproduce that in the <a> by adding the appropriate GET values.

        <form method="POST" name="moredetails">       
        <input type="hidden" name="event_TYPE" value="A"> <input type="hidden" name="event_ID" value="1403993"> <input type="hidden" name="do_this" value="events.php"> <a id="eventspan" href="index.php?do_this=events.php&event_TYPE=A&event_ID=1403993">DATE/TIME<br>Sunday, February 15 <br>12:00pm~1:30pm </a> <input type="image" src="pictures/1403993_00B.jpg" style="width:100%;">
        <br>(Event Address)</form>

          ...continuing with the <a> idea:

          I figured out the the do_this value had to be single-quoted, (eg." href="index.php?do_this='events.php'&event_TYPE=A....")
          which DOES take me to the destination correctly(if I add the process to deal with $_GET there), but the rest of the page logic is such that I can't get back out of it.

          still working...

            Looks to me like clicking the image submits the form, correct? In that case, you want clicking the <a> link to submit the form. I would strongly recommend using jquery and setting up the <a> tag to submit the form. You'll need to give the form an id. In this example, I have given the form an id=moredetails:

            <form method="POST" name="moredetails" id="moredetails">
            <input type="hidden" name="event_TYPE" value="A">
            <input type="hidden" name="event_ID" value="1403993">
            <input type="hidden" name="do_this" value="events.php">
                <a id="eventspan">DATE/TIME<br>Sunday, February 15 <br>12:00pm~1:30pm </a>
            <input type="image" src="pictures/1403993_00B.jpg" style="width:100%;">     
            <br>(Event Address)</form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"> $( "#eventspan" ).click(function() { $("#moredetails").submit(); }); </script>

            or something like that. I haven't tested it.

              Or, since the thing is supposed to display as a box anyway, use a <button> (suitably styled: no border, semitransparent, rotated 20°, etc).

                Weedpacket;11045335 wrote:

                Or, since the thing is supposed to display as a box anyway, use a <button> (suitably styled: no border, semitransparent, rotated 20°, etc).

                This is probably the most elegant solution.

                  Write a Reply...