Forum | Appery.io

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.

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"><&#47;canvas>/code

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

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

ctx&#46;fillStyle = "rgba(0, 0, 200, 0&#46;5)&quot
ctx&#46;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: