jquery 页面错误:未捕获的错误:索引大小错误:DOM异常1

mrphzbgm  于 2023-02-08  发布在  jQuery
关注(0)|答案(4)|浏览(119)

我使用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中的DOM异常1 "**:

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

有人知道发生了什么吗?

y53ybaqx

y53ybaqx1#

无论何时在画布上调用drawImage,并且想要裁剪图像,都必须传入9个值。

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

这东西太多了!很容易出错为了避免它们,让我来解释剪切图像时drawImage是如何工作的。
假设在一张纸上画一个正方形,你画的正方形的左上角位于sourceX像素和sourceY像素处,其中0表示你画的正方形的左上角,你画的正方形的像素大小由sourceWidthsourceHeight定义。
您定义的正方形内的所有内容现在都将被剪切并粘贴到画布内的destXdestY位置(以像素为单位)(其中0是画布的左上角)。
因为我们不是在真实的生活中,你切下的正方形可能会被拉伸而有不同的维度,这就是为什么你还要定义destWidthdestHeight
这是所有这些的图形表示。

回到你的问题,Uncaught Error: IndexSizeError: DOM Exception 1通常出现在你试图剪切的正方形比实际的一张纸大,或者你试图在一个它不存在的位置剪切一张纸(比如sourceX = -1,由于显而易见的原因这是不可能的)。
我不知道bounds.leftbounds.top和其他的是什么,但是我99.9%肯定它们是错误的值。尝试console.log它们,并将它们与您提供的图像对象(在本例中是画布)进行比较。

console.log(canvas.width);
console.log(canvas.height);
console.log(bounds.left);
console.log(bounds.top);
ecc....
ocebsuys

ocebsuys2#

Thishtml2canvas错误报告。
我能够修复未捕获错误:索引大小错误:DOM异常1,通过修补html2canvas.js文件。
替换为:

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

ne5o7dgx3#

我会说,您可能在div上有一些float属性或fixed位置,导致容器高度为0,而内容的高度上级。我以前遇到过这个问题,因为 html2canvas 无法处理大于容器的内容。例如,如果您有这样的内容:

<div>
  <img url="..." style="float: right;">
</div>
  • html2canvas* 将引发此错误,因为div的高度为0,而img更大。可能的更正方法是强制div的高度高于图像高度。

谢谢土星的详细回答,你帮我找到了它的来源。
我希望这能帮助你,

rjee0c15

rjee0c154#

我也有同样的问题。当我试图在一个隐藏的元素中使用画布时,问题就发生了。在我的例子中,我使用的是Bootstrap模式和画布。
解决方案是:“在元素完全可见后实现画布代码”
在我的例子中,我必须使用$('.modal').on('shown.bs.modal', function(){})而不是$('.modal').on('show.bs.modal', function(){}),因为模态元素完全出现在shown.bs.modal事件上;)

相关问题