Question

我使用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>

我在html2canvas.js中收到此错误：“未捕获错误：IndexSizeError：DOM异常1”：

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

的原因

这是所有这些的图形表示。

none

要回到您的问题，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

This是html2canvas错误报告。

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

替换这个：

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

我会说你可能在div上有一些float属性或fixed位置，导致容器的高度为0，而内容的高度更高。我之前遇到此问题是因为 html2canvas 无法处理大于其容器的内容。例如，如果你有这样的东西：

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

html2canvas 会引发此错误，因为div的高度为0而img更大。可能的纠正是强制div的高度超出图像高度。

感谢Saturnix提供了详细的答案，你帮我找到了它的来源。

我希望这可以帮到你，

Answer 4

我有同样的问题。当我尝试在隐藏元素中使用canvas时发生问题。在我的情况下，我使用Bootstrap模态和其中的画布。

解决方案是：＆＃34;在元素完全可见后实现画布代码＆＃34; 。

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

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

4 个答案: