GetImageData不返回預期的結果用於比較2張圖像

如果我有2張圖像是相同的，但我更改1像素，它說我的數組中有131個不同的更改。這是爲什麼發生？我使用getcanvasdata和一個循環來創建2個數組來比較兩者。GetImageData不返回預期的結果用於比較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>

來源

2017-03-17 Akhil Chandan

你是如何創建圖像文件的？如果你改變一個像素然後保存該文件，那麼JPG有損壓縮算法可能會導致更多的差異，不是嗎？ – nnnnnn

請注意，您不計算不同的像素，但不同的通道（即像素x 4）。 – K3N

我懷疑這裏你的問題實際上是在爲你的圖像文件使用.jpg S，因爲這些含有壓縮失真。更改一個像素和/或通過將其保存爲新文件來重新壓縮一個新文件，由於相當有損壓縮方法，經常會導致多個像素髮生更改。我建議您嘗試使用.png圖片，因爲它們是（通常是）無損格式。這裏你的方法的其餘部分似乎很穩固。

或者，爲了測試代碼以確保它可以正常工作，可以只將其中一個圖像加載到兩個畫布中，然後選擇一個任意點（例如，點（100,100） myCanvas2）一個，做一個意外之色快一個像素矩形

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

比較兩個畫布前右（比如＃FF0080）。這可能不適用於你最後的情況，但它應該準確地測試你寫的功能。

來源

2017-03-17 03:28:42 GameGibu

即使對於PNG，也不能確定它會返回相同的值，但在顏色配置文件中可能會有一些差異。另外，人們應該記住，從畫布測試圖像實際上是一個不行（https://en.wikipedia.org/wiki/Canvas_fingerprinting，http://stackoverflow.com/questions/36273990/canvas2d-todataurl-different-output -on-不同的瀏覽器/ 36274211） – Kaiido

GetImageData不返回預期的結果用於比較2張圖像

回答

相關問題