画布绘制的图像大小不同于返回的数据

Question

所以我正在尝试使用我在github上找到的pixelmatch库，我制作了这段代码。我面临的问题是功能返回与之前的图片相同的尺寸，但是当我将图像数据放在画布上时，只绘制了部分图像，我真的不知道为什么。由于调试器中的尺寸在所有三张图片中都相同。

    <img id="1" src="test/fixtures/3a.png">
        <img id="2" src="test/fixtures/3b.png">
        <img id="3" src="">
        <canvas id="myCanvas3"> </canvas>
        <button id="diff">Difference </button>

      <script src="pixelmatch.js"></script>
      <script>

        function os(){
            var canvas1 = document.createElement('canvas');
            var ctx1    = canvas1.getContext('2d');
            var canvas2 = document.createElement('canvas');
            var ctx2   = canvas2.getContext('2d');
            var canvas3 = document.getElementById('myCanvas3');
            var ctx3    = canvas3.getContext('2d');
            var myImgElement1 = document.getElementById('1');
            var width = myImgElement1.width, height=myImgElement1.height;
            ctx1.drawImage( myImgElement1, 0, 0 );
            var myImgElement2 = document.getElementById('2');
            ctx2.drawImage( myImgElement2, 0, 0);


        var img1 = ctx1.getImageData(0, 0, width,height),
            img2 = ctx2.getImageData(0, 0, width,height),
            diff = ctx3.createImageData(width, height);

        pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.05});

        ctx3.putImageData(diff, 0, 0);
    }

    window.onload = function(){
            document.getElementById('diff').addEventListener('click', os, false);
        };

  </script>`

结果：

Answer 1

您的问题是画布大小，您使用的是默认画布大小。

<canvas id="myCanvas3"> </canvas>

更改html

<canvas id="myCanvas3" width = "500px" height = "500px"> </canvas>

或更改javascript

 canvas3.width = width;
 canvas3.height = height;

我已经在我的电脑上测试过了。

了解更多向画布元素添加边框

<canvas id="myCanvas3" width = "500px" style = "border:solid rgb(200,100,200);"> </canvas>

结果：您的图像被绘制，但putImageData不会更改canvas元素的宽度和高度，因此您无法看到完整内容。