PutImageData仅将部分图像绘制到画布上

Question

HTML：

<img id="img-1" src="test/fixtures/1a.png">
<img id="img-2" src="test/fixtures/1b.png">
<canvas id="myCanvas3" style = "border:solid rgb(300,50,300);"> </canvas>
<button id="diff">Difference </button>

使用Javascript：

 pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
 ctx3.putImageData(diff, 0, 0);

其中img1和img2是来自网站上图片的图像数据，宽度是其尺寸的高度。所以我有问题，putImageData以某种方式不会将整个图像放入画布。

Asyou在这里可以看到图像在图像数据中具有相同的尺寸。但是将图像数据放在画布上后得到的结果是：

正如您可以从边框清楚地看到画布足够大且尺寸合适但图像仅部分绘制。