Creating Watermarked Images in PhoneGap

Raymond Camden

May. 25, 12 · Interview

Like (0)

Save

4.36K Views

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>
<html>
<head>
<script src="cordova-1.7.0.js"></script>
<script src="jquery.min.js"></script>
<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").removeAttr("disabled");
    }
    
$("#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");
console.log(JSON.stringify(e));
}

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

        var img = new Image();
        img.src=picuri;

        img.onload = function(e) {
            canvas.drawImage(img, 0, 0);
            canvas.drawImage(watermark, canvasDom.width-watermark.width, canvasDom.height - watermark.height);
        }
        
}
}
</script>
<style>
    #myCanvas {
        width: 400px;
        height: 400px;
    }
</style>
</head>

<body onload="init()">

<h1>Watermark Test</h1>

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

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

</body>
</html>

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.

IT application Data Types JavaScript API Event Object (computer science)

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

Opinions expressed by DZone contributors are their own.

Comments

Creating Watermarked Images in PhoneGap

Popular on DZone

Partner Resources