0

I am working on an WebApp which requires a function to allow user to

  1. Select a image from gallery
  2. Apply a mask on it
  3. 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.

1 Answer 1

0

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 !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.