9

我正在使用 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 );

有谁知道发生了什么？

4

4 回答 4

20

每当您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....
于 2013-03-11T01:05:59.577 回答
9

这是html2canvas错误报告。

通过修补 html2canvas.js 文件，我能够修复未捕获的错误：IndexSizeError: DOM Exception 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);
于 2014-01-10T15:12:55.267 回答
7

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

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

html2canvas将引发此错误，因为div它的高度为 0 而img更大。可能的更正将是强制 div 的高度优于图像高度。

感谢 Saturnix 的详细回答，您帮助我找出了它的来源。

我希望这可以帮助你，

于 2013-03-29T10:46:15.210 回答
0

我有同样的问题。当我尝试在隐藏元素中使用画布时发生了问题。就我而言，我使用的是 Bootstrap 模态和其中的画布。

解决方案是：“在元素完全可见后实现画布代码”。

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

于 2017-12-14T15:40:26.803 回答