How to save image from Javascript using canvas

[yzl...@gmail.com]

Hi!

I'm trying to create a task to draw watermark on pictures using Javascript. I've got a Image Object and how can I save it as image on sdcard?

[Joey van Bilsen]

Did you create a Tasker project yourself already, or are you just looking for someone to do the work for you? 

As far as I understand your question correctly, you want to have a script with a watermark function, and a script for saving the image with the watermark in it.

If you can be a bit clearer in describing what you want, and what it is you're trying to achieve, Me myself (and of course other members of this forum) will be able to help you out. Your question (to me) is kinda complex that it would be nice if you had some time to elaborate on your question?

[Zhiling Ye]

Thanks for your kind reply!

I've already created a Javascriptlet like this,

var testImage = new Image();

testImage.setAttribute('crossOrigin', 'anonymous');

testImage.src = ""; //  Point to the original image here 

var h = testImage.height, w = testImage.width, img = new Image();

img.src = "https://f0.pngfuel.com/png/791/417/red-sample-text-png-clip-art.png"

var canvas = Object.assign(document.createElement('canvas'), { width: w, height: h });

var ctx = canvas.getContext('2d');

ctx.drawImage(testImage, 0, 0);

ctx.drawImage(img, 0, 0);

try {

var imgAsDataURL = canvas.toDataURL('image/png');

// Here I want to export this canvas image to sdcard

flash("OK");

}

catch (e) {

console.error('Cannot watermark image with text:', { src: elemImage.src, text: text, error: e });

}