我使用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 );
有人知道发生了什么吗?
4条答案
按热度按时间y53ybaqx1#
无论何时在画布上调用
drawImage
,并且想要裁剪图像,都必须传入9个值。这东西太多了!很容易出错为了避免它们,让我来解释剪切图像时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
它们,并将它们与您提供的图像对象(在本例中是画布)进行比较。ocebsuys2#
This是
html2canvas
错误报告。我能够修复未捕获错误:索引大小错误:DOM异常1,通过修补html2canvas.js文件。
替换为:
通过以下方式:
ne5o7dgx3#
我会说,您可能在div上有一些
float
属性或fixed
位置,导致容器高度为0,而内容的高度上级。我以前遇到过这个问题,因为 html2canvas 无法处理大于容器的内容。例如,如果您有这样的内容:div
的高度为0,而img
更大。可能的更正方法是强制div的高度高于图像高度。谢谢土星的详细回答,你帮我找到了它的来源。
我希望这能帮助你,
rjee0c154#
我也有同样的问题。当我试图在一个隐藏的元素中使用画布时,问题就发生了。在我的例子中,我使用的是Bootstrap模式和画布。
解决方案是:“在元素完全可见后实现画布代码”。
在我的例子中,我必须使用
$('.modal').on('shown.bs.modal', function(){})
而不是$('.modal').on('show.bs.modal', function(){})
,因为模态元素完全出现在shown.bs.modal
事件上;)