个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 html2canvas 转换 Canvas 上的 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>
我收到此错误:“未捕获错误:IndexSizeError:DOM 异常 1” 在 html2canvas.js 中:
ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
有人知道发生了什么吗？
最佳答案
每当您在 Canvas 上调用 drawImage 并想要裁剪图像时，都必须传入 9 个值。
ctx.drawImage(
imageObject,
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight);
现在有很多东西了!很容易犯错误:为了避免错误，让我解释一下drawImage在裁剪图像时是如何工作的。
想象一下在一张纸上画一个正方形。您正在绘制的正方形的左上角位于 sourceX 像素和 sourceY 像素处，其中 0 是纸张的左上角。您所绘制的正方形的尺寸(以像素为单位)由 sourceWidth 和 sourceHeight 定义。
您定义的正方形内的所有内容现在都将被剪切并粘贴到 Canvas 内的 destX 和 destY 位置(以像素为单位)(其中 0是 Canvas 的左上角)。
因为我们不在现实生活中，所以您切割的正方形可能会被拉伸(stretch)并具有不同的尺寸。这就是为什么您还必须定义 destWidth 和 destHeight
这是所有这一切的图形表示。
回到你的问题，Uncaught Error: IndexSizeError: DOM Exception 1 通常在你尝试剪切的正方形比实际的纸张大或者你正在尝试时出现将这张纸剪到不存在的位置(例如 sourceX = -1，由于显而易见的原因，这是不可能的)。
我不知道 bounds.left、bounds.top 和其他值是什么，但我 99.9% 确信它们是错误的值。尝试console.log它们并将它们与您提供的图像对象(在本例中为 Canvas )进行比较。
console.log(canvas.width);
console.log(canvas.height);
console.log(bounds.left);
console.log(bounds.top);
ecc....
关于jquery - html2canvas错误: Uncaught Error: IndexSizeError: DOM Exception 1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15328764/
25
4
0
我正在尝试更改音频的音量，但在尝试时，我在控制台日志中收到 IndexSizeError: Index or size is negative or more than the allowed amo
我正在使用 ChartJS 显示不同项目的饼图和条形图。当我单击“统计信息”选项卡中的第一个项目时，它会正确显示图表。当我点击下一个项目时，它不显示从那里开始的图表。相反，抛出一个异常: Uncaug
我正在查询“keyup”上的 websql 表，因此它返回所查询字符串的前 10 个匹配项的列表，我将此搜索字符串保存在一个名为 currval 的变量中，我将其传递给查询字符串。 当我的结果集等于
我将标准 iframe 嵌入到显示 SoundCloud 音乐播放器的非 SSL 网页中。播放器加载正常，但我在 Safari 开发者工具中发现错误如下: IndexSizeError: DOM Ex
当尝试使用以下代码清除新内容并将其加载到 tinyMce 时 tinymce.activeEditor.setContent('') 它在 中显示错误 IE9, IE10 显示 IndexSizeEr
我从 收到此错误哨兵在 ios 中重复 - safari 14.0 在 react 项目中。 没有代码跟踪，也没有其他信息，但它几乎在每个 URL 中重复。 我已经到处寻找选项。我试过调试但我无法复制
我正在尝试检测图像中的面部。我只需要用户选择的图像中的面孔数量。我使用以下代码将图像从输入字段加载到预览 div 中: function readURL(input) { if (input.
我正在使用 html2canvas 转换 Canvas 上的 div。像这样: ... ... $('#demo').html2canvas({ onrendered:
我发现某些代码在 Internet Explorer 和 Edge 中失败，但在 Chrome 和 Firefox 中似乎可以完美运行: var image = document.getElement
因此，在 Firefox 中，当我在 Canvas 元素上使用 drawImage 时，我在控制台中收到此错误。 "IndexSizeError: Index or size is negative
我正在使用 jquery 和谷歌地图 v3 创建一个页面，并且我正在尝试在谷歌地图上显示一个标记。出于某种原因，我在使用 Firefox 时遇到错误(并且标记未显示在 map 上): Error: I
clear_table = function( ) { var table
我正在使用 Chart.js Arc 函数绘制圆环图。有一段时间效果很好。但最近它开始抛出上述异常。 Chart.js Arc 函数中的以下行抛出异常: ctx.arc(this.x, this.y,
设置blurDelay = 0后，点击Bold，点击Paste in toolbar，会报如下错误。 未捕获的 IndexSizeError:无法在“选择”上执行“扩展”:1 大于给定节点的长度。 C
当我尝试使用范围时，我在控制台中收到此错误: Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range': The offset 2
我以前使用 Chrome，但我需要使用 Firefox 测试我的插件。我正在 try catch 视频元素并将其绘制到 Canvas 上。在 Chrome 中，一切正常，但在 Firefox 中，我遇
为什么图片没有出现在我的页面上？未捕获的 IndexSizeError:无法在“HTMLTableRowElement”上执行“insertCell”:提供的值 (1) 超出范围 [-1, 0] -
我是一名优秀的程序员,十分优秀！