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

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}