Html2canvas: Error on .toDataURL where div has a background image hosted on cloud

Created on 29 May 2015 · 8Comments · Source: niklasvh/html2canvas

Been trying to debug an issue with h2c in IEornthe last 2 days without success. Maybe someone has come across this problem and can help.

The problem:

simple capture of a div containing a background image that is hosted on a cloud ie cross-domain
usCors set to true and cross domain policy in place. No issues drawing canvas.
returns canvas in onRendered event and can append to window
fails on .toDataURL in IE11. All other browsers work
no error message thrown in IE console (which is weird). Just doesn't alert after .toDataURL ie fails here
changing background image url to be served off server serving the page does work!
looking at H2C logs, image is being loaded successfully and tainted attribute = null. As evident in working canvas being returned and appendable to the window.
seems to be related to cross-domain challenge and yet can lend the canvas to the window and no errors thrown.

I've searched this forum and trawled the Internet for someone having a similar issue - no luck. Has anyone had a similar issue?

My only options now seem to be to set up a proxy solution or try and debug H2C. Want to put the problem to this forum before I start with a proxy or debugging. To be honest, I don't think I know enough to debug h2c. Any help or pointers will be much appreciated.

Many thanks
Dave

Source

davidoxley

Most helpful comment

It is pretty much related to the CORS.
Try adding allowCORS : true when you call html2canvas.
The website should also be allowing cross-origin requests for the images to be shown successfully.

@imalhasaranga If the canvas is generated and appended to the DOM, html2Canvas has done its job, the problem should be somewhere else.

JF10R on 26 Jun 2015

👍3

All 8 comments

Here is a simple illustration at jsBin. The canvas can be appended to a div in all browsers so looks like the canvas is being rendered. However .toDataURL doesn't work in IE11 - works in all other non-IE browsers.

http://jsbin.com/tibeye/41/edit

Thx

davidoxley on 29 May 2015

Facing the same issue right now, canvas can be appended to the dom and it is rendering fine, but whenever I call toDataURL("image/png") throws exception in html2canvas.js

imalhasaranga on 14 Jun 2015

It is pretty much related to the CORS.
Try adding allowCORS : true when you call html2canvas.
The website should also be allowing cross-origin requests for the images to be shown successfully.

@imalhasaranga If the canvas is generated and appended to the DOM, html2Canvas has done its job, the problem should be somewhere else.

JF10R on 26 Jun 2015

👍3

@davidoxley It seems like you aren't using allowTaint: true on your JSBin example. I'm pretty sure this is what creates the Security Error on IE.

JF10R on 29 Jun 2015

Jeff, thanks will try that. In the end we created a fall-back proxy solution which we're happy with as who knows which direction this will go in future. But will try your suggestion as would be good to minimise burden on our server. Thx!

davidoxley on 30 Jun 2015

Just tried adding allowTaint: true. No joy I'm afraid

davidoxley on 30 Jun 2015

Tried proxy? https://github.com/niklasvh/html2canvas/wiki/Proxies