How can I add a text watermark to an image clicked by camera?

Sun Jun 02, 2013 1:32 pm

Hi,

I want to add watermark my photos with my company name in text. I found this post offering a solution for Phonegap - http://www.raymondcamden.com/index.cf...

However, the code refers to some object called canvas. I looked at the source html for my page and couldn't find any canvas object where I have placed the image component.

I also think that instead of base64, I'll somehow have to use imageURI with these lines of code:
canvas.drawImage(img, 0, 0);
canvas.drawImage(watermark, canvasDom.width-watermark.width, canvasDom.height - watermark.height);

But I'm not sure how it's to be done exactly. Any help in appreciated.

Cheers,
Rahul.

Sun Jun 02, 2013 4:09 pm

Hi Rahul - this topic (https://getsatisfaction.com/apperyio/...) should help you with bacis idea on how to work with canvas element, espatialy this part:

Put this in Panel component (change type to 'html'):

1)
code<canvas id="canvas" width="150" height="150"></canvas>/code

2)
Create a new JavaScript file:
codefunction draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)&quot
ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)&quot
ctx.fillRect (30, 30, 55, 50);
}
}
/code

3) Add Load event to the page and run this in Custom JavaScript:
codedraw();/code

You will see this: