2

ユーザーが 2 つの画像の異なる領域を検出するゲームを作成します。この 2 つの画像にはいくつかの異なる領域があり、すべて同じように見えるため、ユーザーはそれを確認する必要があります。

そのため、2 つの異なるビットマップ イメージを比較して、異なる領域を検出したいと考えています。

誰かが私にヒントを与えることができますか？キャンバスを使用する必要がありますか?

HTML5、javascriptでこのゲームを作っています……。

4

3 に答える 3

2

最初に各画像をキャンバスに描画します

var img1 = (your first image), 
    img2 = (your second image),
    ctx1 = document.createElement('canvas').getContext('2d'),
    ctx2 = document.createElement('cavnas').getContext('2d');

ctx1.canvas.width = img1.width;
ctx2.canvas.width = img2.width;
ctx1.canvas.height = img1.height;
ctx2.canvas.height = img2.height;

ctx1.drawImage(img1, 0, 0);
ctx2.drawImage(img2, 0, 0);

次に、各imgの画像データを取得します

var data1 = ctx1.getImageData(0, 0, img1.width, img1.height);
var data2 = ctx2.getImageData(0, 0, img2.width, img2.height);

最後に比較します（これは、img1とimg2が同じ次元であると想定しています）

var different = [];

for (var y=0; y<img1.height; y++){
    for (var x=0; x<img1.width; i++){
        var pos = (x * 4) + (y * (img.width * 4));
        for (var i=0; i<4; i++){
            if (data1[pos + i] != data2[pos + i]){
               different.push({x: x, y: y});
            }
        }
    }
}

これにより、2つの画像間で異なるすべてのピクセルのx、y座標の配列が得られます。

于 2012-07-06T13:41:12.710 に答える
0

画像から何らかの方法で RGB 値を取得し、それらを比較する必要があります。openCV ライブラリを参照して、画像処理がどのように行われるかを確認できます。

または、Web ページに埋め込むアプレットを設計することもできます。Java は、RGB 値を操作するためのクラスを提供します。

1 つのイメージの色を反転し、別のイメージと重ね合わせます。絶対差を取り、どのピクセルで差が生じているかを確認します。

于 2012-07-06T08:38:52.110 に答える
-1

JavaScript は画像内のピクセルをチェックできません。そのため、カラーピッカーは div でのみ機能します (背景色を読み取ります)。

于 2012-07-06T08:33:09.480 に答える