html2canvas错误：未捕获错误：IndexSizeError：DOM异常1(html2can

我使用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” html2canvas.js：

ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );

有没有人有大约就是发生了主意？

Answer 1:

每当你打电话drawImage在画布上，并要裁剪图像，你必须在9个值来传递。

ctx.drawImage(
imageObject,
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight);

现在这是一个很大的东西！这真的很容易做出错误：避开他们，让我解释一下如何工作的drawImage裁剪图像时。

试想一下，画在纸上的正方形。你绘制正方形的左上角位于sourceX像素和sourceY像素，其中0是你的一张纸的左上角。在你绘制正方形的像素尺寸被定义sourceWidth和sourceHeight 。

您已经定义了广场内的一切，现在将被削减，并在位置（像素）粘贴画布的内部destX和destY （其中0为画布的左上角）。

因为我们在现实生活中却没有，你砍方可以被拉伸并具有不同的尺寸。这就是为什么你还必须定义destWidth和destHeight

下面是这一切的图形表示。

要回到你的问题， Uncaught Error: IndexSizeError: DOM Exception 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....

Answer 2:

这是html2canvas bug报告。

我是能够解决未被捕获的错误：通过修补html2canvas.js文件DOM异常1：IndexSizeError。

替换此：

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);

Answer 3:

我要说的是，你可能有一些float属性或fixed在导致容器是高度为0，而内容具有超强的高度DIV位置。我有这个问题之前，由它引起的，因为html2canvas不能处理的内容比它的容器更大。例如，如果你有这样的事情：

<div>
  <img url="..." style="float: right;">
</div>

因为html2canvas将提高这个错误div为0的高度，而img更大。可能的修正将迫使格的高度是supperior图像高度。

感谢Saturnix为您详细解答，你帮我找到了它来自何处。

我希望这可以帮助你，

Answer 4:

我有同样的问题。当我试图用一个隐藏的元素中的帆布问题发生。在我来说，我使用的引导模式和里面的画布。

解决方法是：“实现帆布码后元素是完全可见”。

在我来说，我必须使用$('.modal').on('shown.bs.modal', function(){})而不是$('.modal').on('show.bs.modal', function(){})因为模态元件完全出现在shown.bs.modal事件; ）

文章来源: html2canvas error: Uncaught Error: IndexSizeError: DOM Exception 1