3

同じキャンバスから同じコンテキストを介して取得する2つのimageDataオブジェクトがあります。しかし、それらを比較すると、同じデータが含まれているはずなので、同じだと思うと同じではありません。

var canv = document.createElement("canvas");
canv.setAttribute('width', 300);
canv.setAttribute('height', 300);
var context = canv.getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(0, 0, 300, 300);

var imageData = context.getImageData(0, 0, 300, 300);
var imageData2 = context.getImageData(0, 0, 300, 300);

if (imageData == imageData2) {
    console.log("Test1: same");
} else {
    console.log("Test1: different");
}
if (imageData.data == imageData2.data) {
    console.log("Test2: same");
} else {
    console.log("Test2: different");
}

if (imageData == imageData) {
    console.log("Test3: same");
} else {
    console.log("Test3: different");
}
if (imageData.data == imageData.data) {
    console.log("Test4: same");
} else {
    console.log("Test4: different");
}​

このコードは以下を出力します：

Test1: different
Test2: different
Test3: same
Test4: same

したがって、オブジェクトをそれ自体と比較すると、期待どおりに機能し、imageDataオブジェクト内のデータを比較する場合は機能しますが、同一のコピーである必要があるものとは比較できません。

これはオブジェクトの比較に関する問題ですか、それとも、canvas要素からデータを取得する方法に欠けているものがありますか？

ありがとう

4

3 に答える 3

4

imageData.dataはCanvasPixelArray、オブジェクトです。2つのオブジェクトの場合、AとBA == Bは、同じオブジェクトを参照している場合にのみ真になります。

2つの異なるimageDataオブジェクトを使用しているため、それらのプロパティが同じであっても、falseと評価されますimageData == imageData2。imageData.data == imageData2.data

imageData.data のタイプがに変更されているUint8ClampedArrayことに注意してください。これは基本的にCanvasPixelArrayBufferです。

2つの画像をチェックするには、ピクセルベースのチェックを行う必要があります。

function compareImages(img1, img2) {
   if (img1.data.length != img2.data.length)
       return false;
   for (var i = 0; i < img1.data.length; ++i) {
       if (img1.data[i] != img2.data[i])
           return false;
   }
   return true;   
}

ただし、非ブロッキングメソッドを使用するライブラリがすでに存在する可能性があります。

于 2012-08-01T08:07:39.310 に答える
2

javascriptを使用して画像をbase64文字列に変換する方法

画像のbase64への変換に関するこの質問を読んでください。

それをbase64文字列に変換して、文字列を比較できるようにしましたか？

ここを見てみてください：http ：//www.webresourcesdepot.com/pixel-by-pixel-image-comparison-with-im-js/

http://tcorral.github.com/IM.js/

重複画像を検出するために私が使用したもの、多分これはあなたが探しているものですか？

于 2012-08-01T08:07:47.890 に答える
1 
JSON.stringify(imageData) == JSON.stringify(imageData2)

期待どおりに動作するはずですが、大きな画像では少し遅くなります

于 2015-07-17T07:17:07.100 に答える