Uncaught Error: IndexSizeError: DOM Exception 1

[switer]

Uncaught Error: IndexSizeError: DOM Exception 1
when it execute
ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);
while my code want to html2canvas.render a display:none element;

What causes this error ?

The error track :
(anonymous function) html2canvas.js:2828 _html2canvas.Renderer html2canvas.js:2552 options.complete html2canvas.js:2667 start html2canvas.js:2082 img.onload

[niklasvh]

What browser are you using? Which version of html2canvas?

[switer]

html2canvas 0.4.0 and chrome 25.0.1364.172 m @windows

[nbashaw]

I got this error too. Here's my code:

el = document.createElement('div');
el.innerHTML = '<h1>Hello world</h1>';
html2canvas(el);

[niklasvh]

@nbashaw The element needs to be appended to the document for it to be rendable.

[thomasyung]

I get this same error on IE9. Works fine in Chrome and FireFox. I was looking around for answers and I saw this post: http://stackoverflow.com/questions/15328764/html2canvas-error-uncaught-error-indexsizeerror-dom-exception-1 I logged all the dimensions, and they appear within the bounds. Is there a bug in IE9 with drawImage method?

[thomasyung]

I found out that IE9 browser seems to crap out when padding and font-size is applied to a div that you are targeting.

#page {
font-size: 30px;
color: white;
background-color: blue;
border: 1px solid black;
padding: 3em;
width: 1700px;
height: 1900px;
}

$(function() {
$('#go').click(function(){
html2canvas($('#page'), {
onrendered: function(canvas) {
$('body').append(canvas);
}
});
});
});

Testing 1 2 3

by Thomas Yung

Testing 1 2 3

Go

[ghost]

Hey I have been having the exactly the same problem. Isnt there any way to render a display:none/hidden element??

[InfernoZeus]

The issue seems to occur when the element being rendered has size 0. Creating a canvas with size 0 is accepted, but as soon as you try to draw to it, IndexSizeError is thrown. This patch should fix the issue: https://gist.github.com/InfernoZeus/6010328#file-html2canvas-indexsizeerror-patch-diff

[oosterholt]

This issue also occurs in Internet explorer when the width of the element element being rendered using html2canvas is wider than 8192 pixels.
I've created a fiddle to demonstrate this issue: http://jsfiddle.net/ct6mp/5/

[InfernoZeus]

8192 pixels is the largest Microsoft support for size of a canvas, see here: http://msdn.microsoft.com/en-us/library/ie/ff975062%28v=vs.85%29.aspx

Note The maximum size of the rendered area on a canvas is from 0,0 to 8192 x 8192 pixels, regardless of the size of the canvas. For example, a canvas is created with a width and height of 8292 pixels. A rectangular fill is then applied as "ctx.fillRect (0,0, canvas.width, canvas.height)".Only the area within the coordinates (0, 0, 8192, 8192) can be rendered, leaving a 100 pixel border on the right and bottom of the canvas.

Not sure how html2canvas should handle that though..

Also, I don't think that issue is directly related to the original issue, despite the same error message. Perhaps another issue should be filed?

[cipri-tom]

so how did you guys get over this error?

[InfernoZeus]

The one posted originally by switer, or the one mentioned by oosterholt?

[cipri-tom]

the one posted by switer. I am getting the same error when the div I am trying to export is bigger that the window and scroll bars appear. Do you have any workaround for me? :)

[InfernoZeus]

This is the fix I used for the problem where it tries to render an element with size 0 (or display:none/hidden): https://gist.github.com/InfernoZeus/6010328#file-html2canvas-indexsizeerror-patch-diff

I don't think that's actually directly related to the issue you're having where the div is bigger than the window.

[oosterholt]

This is the fix I use for the problem where the image is wider than 8192 pixels:

- ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);
+ var imgData = canvas.getContext("2d").getImageData(bounds.left, bounds.top, bounds.width, bounds.height);
+ ctx.putImageData(imgData, 0, 0);

Requested pull request

[sjamaan]

Can someone close this issue?

[usmonster]

Looks like #320 handled this by cropping, but still can't work around the IE maximum canvas size limitation.. does this matter, though? @switer, @niklasvh can/should this be closed?

[ydanneg]

I confirm #320 fixes this IE issue if bound.left is negative.
This one happens if we try to render not visible (scrolled) components.

Thank you so much.

[janainaemilia]

I get this error in Microsoft Edge. I noticed that I got this error because of the padding-left in the element that I was selecting to render.