html2canvas: Unable to load image Timed out (15000ms) fetching ..

[rsolberg1]

Hi! I am stuck with this problem loading images from the same domain. When I isolate the code in a demo to be just the html2canvas rendering iFrame-content from a parent page to an image it works well (both locally and on IIS Server). It renders both HTML and images inside the iframe. Perfect.

When I place the same code inside the solution which I am working on and still is on the same domain as my demo above, the timeout appears: 0ms html2canvas: html2canvas 1.0.0-alpha.12 html2canvas.js:2667 0ms html2canvas: owner document [object HTMLDocument] html2canvas.js:2667 62ms html2canvas: Document cloned, using computed rendering html2canvas.js:2667 62ms html2canvas: Starting node parsing html2canvas.js:2667 66ms html2canvas: Added image http://localhost:8099/Content/graphics/568/test.png html2canvas.js:2667 66ms html2canvas: Finished parsing node tree html2canvas.js:2667 15066ms html2canvas: Unable to load image Timed out (15000ms) fetching http://localhost:8099/Content/graphics/568/test.png html2canvas.js:2667 15066ms html2canvas: Finished loading 1 images [null] html2canvas.js:2667 15066ms html2canvas: Starting renderer html2canvas.js:2667 15067ms html2canvas: Canvas renderer initialized (500x500 at 0,0) with scale 1 html2canvas.js:2667 15068ms html2canvas: Render completed

The timeout also chokes html2canvas from triggering the return function: html2canvas(htmlContent, canvasOptions).then(function (canvas) { console.log("this code is reached after the timeout occurs.."); renderPageThumbNail(canvas.toDataURL("image/png")); });

html2canvas clearly has no problems fetching the images parsing the node-tree. I am getting this timeout error on any attempt to render images to the canvas independent of wether it is inside the iframe or inside the actual page where the iframe is located. This is not a CORS issue and I am uncertain if the images for some reasons are tainted, but I believe not since the exact same code runs on the same domain in a separate demo. I suspect some other javascript-code to interfere with html2canvas aborting the canvas rendering of images.

I need some clue on where to look in the html2canvas.js file to find what is actually going on before the timeout occurs. Any help at all would be appriciated since I have already spent days trying to figure this one out.

[rsolberg1]

For certain conditions - yet unknown, loading external resources using Promise seems to end up in a loading timeout. This makes no sense at all. Increasing or decreasing the imageTimeout value has no effect..

[rsolberg1]

I have been able to pinpoint the issue to the ResourceLoader. It occured to me that the timeout was logged to the console both when the image loading went well and when it timeout out. In my scenario above when adding my working demo to the actual solution - the image onload function for some reason stops getting called within the imageLoadHandler. That way, the timeout function returns "Image timed out.." at the end:

img.onload = function () { return resolve(img); };

It occurred that maybe the image being created in the imageLoadHandler maybe wasn't a part of the DOM and that it may result in the onload event not firing. I have not had time to investigate it, but changing the line

var img = new Image();

to

var img = document.createElement("IMG");

resolved the issue - so far. It's not a solution to the problem - consider it a temporary workaround.

[coolicer]

@rsolberg1 still problem, can not load large image

[ryanbelt]

Is there any update for this thread? I also have the same issue on try to load large image approx 3.6mb

[khaukheng]

Hi, any update for this issue? I have the this problem when I need to download >20 images for my case is 58 images but it just load until number 18 and the rest is getting timeout message.

[danni-cool]

same problem, If anyone can solve the problem.

[baby-bibin]

Hi All,

Any Updates of this issue. I am also facing the same :(

[baby-bibin]

I've solved this issue by giving base64 image string directly in html file

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAuCAYAAACI...">

;)