Apply A Mask On An Image Then Save It With Transparent Background

I am working on an WebApp which requires a function to allow user to Select a image from gallery Apply a mask on it Save it to a png image with transparent background Is there a

Solution 1:

You cannot get data from an image which is not in your domain for security reasons. This is probably why you get a blank image, you should check your browser console.

You can read this topic if you want details Why does canvas.toDataURL() throw a security exception?

Anyway, yes canvas stores pixels into a rgba array so you can have transparent background. Use it this way :

var img = document.createElement("img");
    img.src = cvs.toDataURL("image/png");

If you want advanced help then don't forget to post your code. I hope my advice will be enough, good luck !