无论何时在画布上调用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....

This是html2canvas错误报告。
我能够修复未捕获错误：索引大小错误：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);

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

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

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

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

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