画布绘制的图像大小与返回的数据不同答案

【问题标题】：Canvas drawing different size of image than in the data returned画布绘制的图像大小与返回的数据不同
【发布时间】：2017-08-29 20:55:23
【问题描述】：

所以我尝试使用我在 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>`

结果：

【问题讨论】：

你能显示结果图片吗？
@artgb 更新了它:)
你能把你有的html文件发给我或者制作jsfiddle吗？
@artgb dropbox.com/s/dq7gagfe6l8jfes/test.zip?dl=0 在这里 :) 只是提醒一下，还没有修复受污染的画布，因为我只在调试器中运行它

标签： javascript html canvas

【解决方案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 不会更改画布元素的宽度和高度，因此您无法看到完整的内容。

【讨论】：