javascript - Canvas 绘制的图像大小与返回的数据不同

Question

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

    <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 大小，您使用的是默认 Canvas 大小。

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

改变 html

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

或更改 javascript

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

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

要了解更多，请为 Canvas 元素添加边框

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

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