0

I've created a little tool that ends up adding a canvas element to the DOM. I'm unable to usetoBlob or toDataURL as the canvas is (apparently) tainted, producing the following error (in chromium) Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported. It errors in the same way with the toDataUrl method.

I'm not sure why this happens, but I've checked and it seems to be something unresolved within the library I'm using. So, is there any way to convert the canvas to an image without using toBlob/toDataURL? Please let me know if further information would be beneficial. Thank you all so much.

Alexander
  • 33
  • 6
  • Have you tried anything from: https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported ? – scrappedcola Aug 07 '23 at 21:24
  • 1
    A tainted canvas is one that uses an image resource that was loaded from a different site(domain, protocol, etc) and therefore affected by CORS. So if the site it is from doesnt use a cors header that allows use cross site you cant get the image from the canvas through javascript – Patrick Evans Aug 07 '23 at 21:30
  • Thanks for your reply. It's not from another site; it's all being generated locally using a plugin (html2canvas). I'm not sure why it's being identified as tainted, but it's something to do with the library and not with my code, so I'm trying to find a workaround. – Alexander Aug 07 '23 at 21:38
  • Are you on Safari? Try to force the canvas renderer of html2canvas (though that should be the default if you didn't set the `foreignObjectRendering` option). The SVG renderer uses a `` element that will taint Safari's canvas for security reasons. But, why do you need either `toBlob` or `toDataURL` exactly? – Kaiido Aug 08 '23 at 02:51

0 Answers0