Html2canvas: SecurityError when using Data URIs css backgrounds on iOS 10+ Safari/Chrome

[sebcante]

Hello,

It seems on iOS 10.3+ html2canvas throws errors when calling ctx.toDataURL() if the page contains any inlined images css background using data URIs.

Error : SecurityError (Dom Exception 18). The operation is unsecure.

To reproduce : https://jsfiddle.net/es26hhdx/

It seems to work ok in iOS 9 and android, only safari and chrome mobile on iOS 10 are affected with the problem so far.

It is weird that those local css background data - URIs cause CORS issues as i would think they are used by the lib as local images.

Could you guys think of any workaround (apart from not using data URIs) ?

thanks

-seb

[door80]

I've also encountered this, and haven't found a workaround other than temporarily changing all images added as dataURIs as file links.

Note: This is also true for Safari 10.1.1 in MacOS Sierra

[CChiaki]

yes I also meet my Iphone 6p 10.3.3 tips me “”SecurityError DOM EXception （18） The operation is insecure“”

[niklasvh]

Fixed with https://github.com/niklasvh/html2canvas/commit/8999c7618184e1564d19d9c367a488c22c0d65a3

[nicholasgonzalezsc]

@niklasvh Thanks for fixing this! When do you think this change will be released?

[leahwhittaker]

@niklasvh We've run into this issue as well. I'm glad to see you've fixed the issue. Any idea when the fix will be released?

[pukara-prabhu]

The main problem is if you have driven the image from css class.
example :
background: url("../assets/images/").

Remove this reference and add it as image tag in the html it will work