Menu
I am using html2canvas to convert a div on a canvas. Like this:
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/html2canvas/html2canvas.js"></script>
...
<body id="body">
<div id="demo">
...
</div>
</body>
<script>
$('#demo').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL()
window.open(img);
}
});
</script>
and I get this error: "Uncaught Error: IndexSizeError: DOM Exception 1" in html2canvas.js:
ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
Does anyone has idea about's what happening?
576
Whenever you call drawImage on a canvas and you want to crop an image, you have to pass in 9 values.
ctx.drawImage(
imageObject,
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight);
now that's a lot of stuff! It's really easy to make errors: to avoid them, let me explain how does drawImage works when cropping an image.
Imagine to draw a square on a piece of paper. The top-left corner of the square you're drawing is positioned at sourceX pixels and sourceY pixels where 0 is the top-left corner of your piece of paper. The dimension in pixels of the square you're drawing are defined by sourceWidth and sourceHeight.
Everything inside of the square you've defined, will now be cut and pasted inside of your canvas at the position (in pixels) destX and destY (where 0 is the top-left corner of your canvas).
Because we're not in real life, the square you cut may be stretched and have a different dimension. This is why you also have to define destWidth and destHeight
Here's a graphical representation of all this.
To get back to your question, Uncaught Error: IndexSizeError: DOM Exception 1 usually appears when the square you're trying to cut is bigger than the actual piece of paper, or you're trying to cut the piece of paper in a position where it doesn't exists (like sourceX = -1, which is impossible for obvious reasons).
I have no idea what bounds.left, bounds.top and the others are, but I'm 99.9% sure that they're wrong values. Try to console.log them and compare them with the image object you're providing (in this case, the canvas).
console.log(canvas.width);
console.log(canvas.height);
console.log(bounds.left);
console.log(bounds.top);
ecc....
This is the html2canvas bug report.
I was able to fix the Uncaught Error: IndexSizeError: DOM Exception 1 by patching the html2canvas.js file.
replace this:
ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);
by this:
var imgData = canvas.getContext("2d").getImageData(bounds.left, bounds.top, bounds.width, bounds.height);
ctx.putImageData(imgData, 0, 0);
i would say that you probably have some float attribute or fixed position on a div that cause a container to be of height 0 while the content has a superior height.
i had this problem before caused by it because html2canvas can't handle a content larger than it's container.
for example, if you have something like this:
<div>
<img url="..." style="float: right;">
</div>
html2canvas will raise this error because div has a height of 0 while the img is bigger.
possible correction will be to force height of div to be supperior to image height.
thanks Saturnix for your detailed answer, you helped me find out where it came from.
i hope this could help you,
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
