apply a mask on an image then save it with transparent background

Question

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 any way to do it? Jquery? HTML5 canvas?

I tried to use HTML5 canvas with context.drawimage() from this site, it displays perfectly on the screen but when I called canvas.toDataURL(), it came up with a blank image. Could anyone help? Welcome any suggestions. Thanks in advance.

score 0 · Accepted Answer · edited May 23 '17 at 11:49

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 !

apply a mask on an image then save it with transparent background

1 Answers1