A reader asked me if it was possible to watermark images (like those taken with a camera) in PhoneGap. This is rather trivial using Canvas (hey, it does have a use!) so I whipped up the following example to demonstrate it in action. First - let’s look at the code. It’s short enough to show all at once:
The UI for the application is just a header and a button. I’ve got the button initially disabled as I need to ensure some resources load before you start taking pictures.
The button’s touchstart event ties in to the PhoneGap Camera API to trigger the device to create a new picture. I could allow for gallery photos as well or make use of images from the web.
Once you take a picture, it’s a trivial matter then to load it into an image object and copy it onto the canvas. Note that I place the watermark in the lower right hand corner of the image. That’s where most watermarks seem to go so I did the same.
Here’s a quick example. Forgive the horrible quality of the Xoom camera.