Before we begin, let’s take a look at our cast and crew – that is, the functions we will be using to directly manipulate our images. A quick list of those functions is as follows:
# gives us the width & height values for a given image
# creates a new, true-color, image object
# returns RGB (+ alpha) info for specific pixel of an image
# (similar as above), returns index of color for specific pixel
# sets a pixel to the specified color
# given RGB values & an image object, the below functions will return a color index value ( that can then be passed to imagesetpixel() )
As you can see, the above functions are each very narrow in their focus. Many of them are also probably self-explanatory. Don’t worry if any appear confusing though; their purposes will become clearer when we began placing them within our application.
Now that we’ve defined the goals of our project, let’s take a step back and talk about the way we will be achieving these goals. At this point it’s okay to be very abstract; we’ll focus on the details shortly.
To begin, our application receives two image objects –- one the source image, and another the watermark image. The first thing we will need to do with these images is to determine their width and height. Once we have that information, we can center-align our watermark. (For the purposes of our application, we are assuming that the watermark will always be smaller than the image we are attempting to protect/brand – probably a safe assumption in most cases.)
Next, our application should super-impose our watermark image on our source image. In order to do this, it will need to average the colors for any overlapping portions of those two images. This will give our resulting image the appearance of alpha transparency.
Finally, we’ll return our modified image for display in a browser. This way, our script can be called directly from within an “<img…>” tag.
Hopefully we’ve not discussed anything too complex so far. So now let’s take a look at the code.
blog comments powered by Disqus