8

クライアントは、製品画像のドミナント カラーを抽出するプログラムについてサポートを必要としていました。

これを Javascript ですばやく実装することができました。以下のアルゴリズムは、画像内の T シャツの色をすばやく推定するために、画像上の 3x3 グリッドの中央の正方形のみをサンプリングします。

var image = new Image();
image.onload = function() {
    try {
        // get dominant color by sampling the central square of a 3x3 grid on image
        var dominantColor = getDominantColor();

        // output color
        $("#output").html(dominantColor);
    }
    catch(e) {
        $("#output").html(e);
    }
};
image.src = "sample_image.jpg";

function getDominantColor() {

    // Copy image to canvas
    var canvas = $("<canvas/>")[0];
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);

    // get pixels from the central square of a 3x3 grid
    var imageData = canvas.getContext("2d").getImageData(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3).data;

    var colorOccurrences = {};
    var dominantColor = "";
    var dominantColorOccurrence = 0;

    for(var i = 0; i < imageData.length; i += 4) {
        var red = imageData[i];
        var green = imageData[i+1];
        var blue = imageData[i+2];
        //var alpha = imageData[i+3]; // not required for this task

        var color = RGBtoHEX({"red": red, "green": green, "blue": blue});

        if(colorOccurrences[color] == undefined) {
            colorOccurrences[color] = 1;
        }
        else {
            colorOccurrences[color] ++;

            if(colorOccurrences[color] > dominantColorOccurrence) {
                dominantColorOccurrence = colorOccurrences[color];
                dominantColor = color;
            }
        }
    }

    return dominantColor;
}

function RGBtoHEX(rgb) {
    var hexChars = "0123456789ABCDEF";
    return "#"
            + (hexChars[~~(rgb.red/16)] + hexChars[rgb.red%16])
            + (hexChars[~~(rgb.green/16)] + hexChars[rgb.green%16])
            + (hexChars[~~(rgb.blue/16)] + hexChars[rgb.blue%16]);
}

問題の画像はこれです（下のプレビュー）。

サンプル品

ただし、この画像が上記のコードで処理されたときの結果は、マシン/ブラウザーによって異なります#FF635E。Windows7 を実行し、Firefox 32 を使用しているマシンで表示されるものです。Mac を実行しているクライアントは#FF474B、Safari と#FF474CFirefox 33 で結果を取得します。

結果は近いですが、理想的にはまったく同じではないのはなぜですか? getImageData実際、ローカルのセットアップによって異なりますか、それとも JPG データは異なるマシンで異なる方法で解釈されていますか?

編集: この画像は 1 回限りのケースではありません。このような色の変化は、クライアントが処理を要求した画像の範囲全体で見られました。私のクライアントと私は、同じ画像セットに対して異なる結果を得ました。

4

1 に答える 1

7

はい。この事実は、キャンバス フィンガープリンティングによって利用されます。

同じ HTML5 Canvas 要素が、実行されたシステムによっては、異なる Web ブラウザーで例外的なピクセルを生成する場合があります。

これはいくつかの理由で発生します。画像フォーマット レベル — Web ブラウザはさまざまな画像処理エンジン、エクスポート オプション、圧縮レベルを使用しており、最終的な画像はピクセル パーフェクトであっても異なるハッシュを取得している可能性があります。ピックスマップ レベル — オペレーティング システムは、アンチエイリアシングとサブピクセル レンダリングに異なるアルゴリズムと設定を使用します。すべての理由を把握しているわけではありませんが、すでに 1,000 を超える独自の署名を収集しています。

于 2014-10-28T18:31:32.097 に答える