GetImageDataが2つの画像を比較するために期待される結果を返さない

Question

1ピクセルを変更する以外は同じ2つの画像がある場合、配列に131の異なる変更があると言います。なぜこうなった？私はgetcanvasdataとループを使って2つの配列を作成し、両方を比較しています。

var c = document.getElementById("myCanvas"); 
var c2 = document.getElementById("myCanvas2"); 
var ctx = c.getContext("2d"); 
var ctx2 = c2.getContext("2d"); 
var img = new Image(); 
var img2 = new Image(); 
var diffpixels = []; 
var imgData; 
var imgData2; 
img.src = "avengers2.jpg"; 
img2.src = "avengers1.jpg"; 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    imgData = ctx.getImageData(0, 0, 1920, 1080).data; 

    img2.onload = function() { 
    ctx2.drawImage(img2, 0, 0); 
    imgData2 = ctx2.getImageData(0, 0, 1920, 1080).data; 
    console.log(imgData2.length); 
    for (var i = 0; i < imgData.length; i++) { 
     if (imgData[i] === imgData2[i]) {} else { 
     diffpixels.push(i); 
     } 
    } 
    console.log(diffpixels); 
    } 
} 

<canvas id="myCanvas" width="1920" height="1080" style="border:1px solid #d3d3d3"></canvas> 
<canvas id="myCanvas2" width="1920" height="1080" style="border:1px solid #d3d3d3"></canvas> 

Answer 1

私は、これらの圧縮からのアーチファクトが含まれているとして、あなたの問題はここに、あなたの画像ファイルの.jpg秒の使用に実際にあると思います。 1つのピクセルを変更したり、画像を新しいファイルとして保存して再圧縮したりすると、圧縮方法がかなり損失するため、複数のピクセルが頻繁に変更されます。代わりに.pngイメージを使用することをお勧めします。なぜなら、（ほとんど、通常は）ロスレスなフォーマットなのでです。あなたの残りの方法はここで確かです。

また、コードが正常に動作することを確認するために、両方のキャンバスに画像のいずれかをロードしてから、任意のポイント（この例ではポイント（100,100） myCanvas2）右の2つのキャンバスを比較する前に1にし、予期しない色（たとえば、＃FF0080のの迅速な1画素の矩形を行う）

ctx2.fillStyle = "#FF0080"; 
ctx2.fillRect(100, 100, 1, 1); 

。あなたが行っている最終的なケースではうまくいかないかもしれませんが、あなたが書いた関数を正確にテストする必要があります。