html2canvas错误:未捕获错误:IndexSizeError:DOM异常1
Eri*_*oHV 8 jquery canvas html2canvas
我使用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 );
有没有人知道发生了什么？
Sat*_*nix 19
每当您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....
这是html2canvas错误报告.
通过修补html2canvas.js文件,我能够修复Uncaught Error: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);
小智 7
我会说你可能在div上有一些float属性或fixed位置导致容器的高度为0而内容的高度更高.我之前遇到过这个问题,因为html2canvas无法处理大于它的容器的内容.例如,如果您有这样的事情:
<div>
<img url="..." style="float: right;">
</div>
html2canvas会引发此错误,因为div高度为0而img较大.可能的纠正是强制div的高度超出图像高度.
感谢Saturnix的详细解答,你帮我找到了它的来源.
我希望这可以帮到你,