Creating Watermarked Images in PhoneGap
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.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
