Berikut ialah beberapa tajuk soalan dan jawapan bahasa Inggeris yang sepadan dengan kandungan artikel: * Bagaimana untuk Mengira Warna Purata Imej Menggunakan JavaScript? * JavaScript: Mendapatkan Warna Purata Imej * Mengekstrak Warna Dominan Imej dengan JavaScript

Bagaimana untuk mendapatkan purata warna imej dalam JavaScript

Menentukan purata warna imej ialah ciri berguna yang boleh digunakan dalam pelbagai aplikasi , seperti mencipta palet warna atau mengekstrak ton keseluruhan imej. Walaupun terdapat banyak rangka kerja dan perpustakaan yang boleh melaksanakan fungsi ini dengan mudah, artikel ini akan menumpukan pada cara menulis skrip menggunakan JavaScript asli untuk mengira purata warna imej.

Penyelesaian

Disebabkan sekatan keselamatan penyemak imbas, akses terus kepada data piksel imej tidak boleh dilakukan melainkan imej dimuatkan ke dalam kanvas. Jadi kami akan menggunakan elemen

Kod

Kod JavaScript berikut menggunakan elemen untuk mendapatkan nilai RGB purata daripada imej:

<code class="javascript">function getAverageRGB(imgEl) {

    // 将图像加载到画布中
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
    canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    context.drawImage(imgEl, 0, 0);

    // 获取图像数据
    var data = context.getImageData(0, 0, canvas.width, canvas.height);

    // 初始化 RGB 和计数器
    var rgb = {r: 0, g: 0, b: 0};
    var count = 0;

    // 循环遍历像素数据
    for (var i = 0; i < data.data.length; i += 4) {
        // 累加 RGB 值
        rgb.r += data.data[i];
        rgb.g += data.data[i + 1];
        rgb.b += data.data[i + 2];
        count++;
    }

    // 计算平均 RGB 值
    rgb.r = Math.floor(rgb.r / count);
    rgb.g = Math.floor(rgb.g / count);
    rgb.b = Math.floor(rgb.b / count);

    return rgb;
}</code>

Gunakan

Untuk menggunakan kod ini, cuma hantar elemen imej yang ingin anda analisis ke fungsi getAverageRGB. Fungsi ini akan mengembalikan objek yang mengandungi nilai RGB purata imej. Nilai ini kemudiannya boleh digunakan dalam pelbagai aplikasi untuk menjana warna atau mengekstrak rona dominan imej.

Atas ialah kandungan terperinci Berikut ialah beberapa tajuk soalan dan jawapan bahasa Inggeris yang sepadan dengan kandungan artikel: * Bagaimana untuk Mengira Warna Purata Imej Menggunakan JavaScript? * JavaScript: Mendapatkan Warna Purata Imej * Mengekstrak Warna Dominan Imej dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!