Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating watermarked images in PhoneGap

DZone's Guide to

Creating watermarked images in PhoneGap

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}