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

JavaScript を使用して画像の平均色を取得する

画像の平均色の決定はさまざまなアプリケーションにとって有益ですが、特に困難な場合があります

JavaScript の実装

幸いなことに、HTML5 の進歩により、JavaScript 開発者は を活用できるようになりました。画像の平均色を抽出する要素。次のスクリプトは、この手法をどのように適用できるかを示しています。

<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 &amp;&amp; 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>

使用法

画像の平均色を取得するには、getAverageRGB 関数を呼び出して画像を渡します。要素を引数として指定します。この関数は、赤、緑、青のコンポーネントの平均値を持つオブジェクトを返します。

制限事項

この手法は、同じドメインに存在する画像に制限されており、 HTML5 キャンバス要素を備えたブラウザでのみサポートされます。 Internet Explorer の古いバージョンの場合は、部分的な機能を有効にするために excanvas ライブラリを組み込むことを検討してください。

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