JavaScript を使用して画像の平均色を計算するにはどうすればよいですか?

JavaScript で画像の平均色を取得する

問題:

を判断することは可能ですかJavaScript を使用して画像の平均色を計算するには?

解決策:

すぐには分からないかもしれませんが、実際に JavaScript を使用して画像の平均色を計算できます。これを実現する鍵となるのは、HTML5 の利用です。

画像から平均色を抽出するには、次の手順に従います。

2. を作成します。
3. drawImage() メソッドを使用して、キャンバス上に画像を描画します。
4. getImageData() を使用して、キャンバスからピクセル データを取得します。
5. 各ピクセルを反復処理し、赤、緑、青の値を個別の変数に累積します。

累積された値をピクセルの合計数で割って、平均色を取得します。

<code class="javascript">function getAverageRGB(imgEl) {
    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = { r: 0, g: 0, b: 0 }, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = { r: 0, g: 0, b: 0 },
        count = 0;

    if (!context) {
        return defaultRGB;
    }

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

    context.drawImage(imgEl, 0, 0);

    try {
        data = context.getImageData(0, 0, width, height);
    } catch(e) {
        /* security error, img on diff domain */
        return defaultRGB;
    }

    length = data.data.length;

    while ((i += blockSize * 4) < length) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i + 1];
        rgb.b += data.data[i + 2];
    }

    // ~~ used to floor values
    rgb.r = ~~(rgb.r / count);
    rgb.g = ~~(rgb.g / count);
    rgb.b = ~~(rgb.b / count);

    return rgb;
}</code>

説明したアルゴリズムを実装する関数の例を次に示します。

この関数は、画像要素を入力として受け取り、赤、緑、青の平均値を整数として含むオブジェクトを返します。

以上がJavaScript を使用して画像の平均色を計算するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。