javascript - Javascript - 背景画像のほとんどの繰り返しピクセル

Question

背景画像で最も反復的なピクセルを見つけて色を見つける方法は? ヘルプ！

Answer 1

JavaScript を介して背景画像のピクセル データにアクセスすることはできません。新しい Image オブジェクトを作成し、ソースを背景画像の URL に設定する必要があります。その後、次の手順を実行する必要があります。

• インメモリ キャンバス オブジェクトを作成する
• キャンバスに絵を描く
• 画像データを取得し、すべてのピクセルを繰り返し処理し、オブジェクトに色を保存します (キー = 色、値 = 繰り返しの量)。
• 繰り返しの量で配列をソートし、最初の値を選択します

ここでは、例を作成しました。これにより、JSconf ロゴが読み込まれ、本文の背景色が最も繰り返しの多い色に設定されます。

// Create the image
var image = new Image();
image.crossOrigin = "Anonymous";

image.onload = function () {
    var w = image.width, h = image.height;

    // Initialize the in-memory canvas
    var canvas = document.createElement("canvas");
    canvas.width = w;
    canvas.height = h;

    // Get the drawing context
    var context = canvas.getContext("2d");

    // Draw the image to (0,0)
    context.drawImage(image, 0, 0);

    // Get the context's image data
    var imageData = context.getImageData(0, 0, w, h).data;

    // Iterate over the pixels
    var colors = [];
    for(var x = 0; x < w; x++) {
        for(var y = 0; y < h; y++) {
            // Every pixel has 4 color values: r, g, b, a
            var index = ((y * w) + x) * 4;

            // Extract the colors
            var r = imageData[index];
            var g = imageData[index + 1];
            var b = imageData[index + 2];

            // Turn rgb into hex so we can use it as a key
            var hex = b | (g << 8) | (r << 16);

            if(!colors[hex]) {
                colors[hex] = 1;
            } else {
                colors[hex] ++;   
            }
        }
    }

    // Transform into a two-dimensional array so we can better sort it
    var _colors = [];
    for(var color in colors) {
        _colors.push([color, colors[color]]);   
    }

    // Sort the array
    _colors.sort(function (a, b) {
        return b[1] - a[1]; 
    });

    var dominantColorHex = parseInt(_colors[0][0]).toString(16);
    document.getElementsByTagName("body")[0].style.backgroundColor = "#" + dominantColorHex;
};

image.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/600px-JavaScript-logo.png";