Bagaimana untuk Mengira Warna Purata Imej Menggunakan JavaScript?

Dapatkan Purata Warna Imej dalam JavaScript

Masalah:

Adakah mungkin untuk menentukan warna purata imej menggunakan JavaScript?

Penyelesaian:

Walaupun ia mungkin tidak kelihatan serta-merta, anda sememangnya boleh mengira warna purata imej menggunakan JavaScript. Kunci untuk mencapai ini adalah melalui penggunaan HTML5 elemen.

Untuk mengekstrak warna purata daripada imej, ikut langkah berikut:

1. Buat elemen dan dapatkan semula konteks 2Dnya.
2. Lukis imej pada kanvas menggunakan kaedah drawImage().
3. Gunakan getImageData() untuk mendapatkan semula data piksel daripada kanvas.
4. Lelar melalui setiap piksel dan kumpulkan nilai merah, hijau dan biru dalam pembolehubah berasingan.
5. Bahagikan nilai terkumpul dengan jumlah bilangan piksel untuk mendapatkan purata warna.

Berikut ialah contoh fungsi yang melaksanakan algoritma yang diterangkan:

<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>

Fungsi ini mengambil elemen imej sebagai input dan mengembalikan objek yang mengandungi nilai purata merah, hijau dan biru sebagai integer.

Atas ialah kandungan terperinci Bagaimana untuk Mengira Warna Purata Imej Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!