如何使用 JavaScript 计算图像的平均颜色？

在 JavaScript 中获取图像的平均颜色

问题：

是否可以确定使用 JavaScript 计算图像的平均颜色？

解决方案：

虽然可能不是很明显，但您确实可以使用 JavaScript 计算图像的平均颜色。实现这一点的关键是通过使用 HTML5 来实现。

要从图像中提取平均颜色，请按照以下步骤操作：

1. 创建一个 元素。元素并检索其 2D 上下文。
2. 使用 drawImage() 方法在画布上绘制图像。
3. 使用 getImageData() 从画布检索像素数据。
4. 迭代每个像素并在单独的变量中累积红色、绿色和蓝色值。
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中文网其他相关文章！