Creating watermarked images in PhoneGap

DZone 's Guide to

Creating watermarked images in PhoneGap

· Web Dev Zone ·
Free Resource

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:

<!DOCTYPE html>
<script src="cordova-1.7.0.js"></script>
<script src="jquery.min.js"></script>
var watermark;
var canvasDom;
var canvas;
function init() {
document.addEventListener("deviceready", startUp, false);

function startUp() {

    canvasDom = $("#myCanvas")[0];
    canvas = canvasDom.getContext("2d");

    //Create a watermark image object
    watermark = new Image();
    watermark.src = "rk.png";
    watermark.onload = function(e) {
        //you can only take pictures once this is loaded...
$("#takePictureButton").on("touchstart", function(e) {
navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI});

function camError(e) {
console.log("Camera Error");

function camSuccess(picuri) {
console.log("Camera Success");

        var img = new Image();

        img.onload = function(e) {
            canvas.drawImage(img, 0, 0);
            canvas.drawImage(watermark, canvasDom.width-watermark.width, canvasDom.height - watermark.height);
    #myCanvas {
        width: 400px;
        height: 400px;

<body onload="init()">

<h1>Watermark Test</h1>

<button id="takePictureButton" disabled>Take a Picture</button>

<canvas id="myCanvas"></canvas>


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.

Looking at the JavaScript code, you can see that I've created a canvas instance from the DOM and have created a watermark image. When it loads, I'm ready to watermark so I enable the button.

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.

You can do anything you want with the image now, including getting the bits and uploading it to a server.


Published at DZone with permission of Raymond Camden , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}