html2canvas错误：未捕获错误：IndexSizeError：DOM异常1 [英] html2canvas error: Uncaught Error: IndexSizeError: DOM Exception 1
问题描述
我使用html2canvas在画布上转换div。像这样：
< 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>
我收到此错误：未捕获错误：IndexSizeError：DOM异常1 strong> in html2canvas.js：
ctx.drawImage（canvas，bounds.left，bounds.top，bounds.width，bounds .height，0，0，bounds.width，bounds.height）;
有没有人知道发生了什么？
每当你调用 drawImage
ctx.drawImage b imageObject，
sourceX，
sourceY，
sourceWidth，
sourceHeight，
destX，
destY，
destWidth，
destHeight ）;
现在是很多东西！很容易犯错误：为了避免它们，让我解释drawImage在裁剪图像时如何工作。
想象一下在一张纸上画一个正方形。您正在绘制的正方形的左上角位于 sourceX 像素和 sourceY 像素，其中0是你的纸张的左上角。正在绘制的正方形的像素尺寸由 sourceWidth 和 sourceHeight 定义。
您定义的正方形内部的所有内容现在都将剪切并粘贴到画布内的位置（以像素为单位） destX 和 destY （其中0是画布的左上角）。
因为我们不在现实生活中，你切割的方块可能会被拉伸并具有不同的尺寸。这就是为什么你还必须定义 destWidth 和 destHeight
以下是所有这些的图形表示。
要回到您的问题，未捕获错误：IndexSizeError：DOM异常1 你试图剪切比实际的纸张大，或者你试图剪切的纸张在不存在的位置（如 sourceX = -1 ，这是不可能的明显的原因）。
我不知道
bounds.left bounds.top ，其他都是，但我99.9％确定他们是错误的值。尝试 console.log ，并将它们与您提供的图片对象（在这种情况下，画布）进行比较。 console.log（canvas.width）;
console.log（canvas.height）;
console.log（bounds.left）;
console.log（bounds.top）;
ecc ....
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?
thanks in advance ;-)
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....
这篇关于html2canvas错误：未捕获错误：IndexSizeError：DOM异常1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
