Canvas获取图像、图片的平均颜色或主色调

深藏阁楼爱情的钟 2021-09-16 17:08 563阅读 0赞

转载自：[https://blog.csdn.net/teajs/article/details/50124207][https_blog.csdn.net_teajs_article_details_50124207]

首先，我们可以使用canvas的getImageData函数获取所有像素的数据。

然后将所有的rgb三值各取平均值即可。

function getImageColor(canvas, img) {
        canvas.width = img.width;
        canvas.height = img.height;
     
        var context = canvas.getContext("2d");
     
        context.drawImage(img, 0, 0);
     
        // 获取像素数据
        var data = context.getImageData(0, 0, img.width, img.height).data;
     
        // 取所有像素的平均值
        for (var row = 0; row < img.height; row++) {
            for (var col = 0; col < img.width; col++) {
                r += data[((img.width * row) + col) * 4];
                g += data[((img.width * row) + col) * 4 + 1];
                b += data[((img.width * row) + col) * 4 + 2];
            }
        }
     
        // 求取平均值
        r /= (img.width * img.height);
        g /= (img.width * img.height);
        b /= (img.width * img.height);
     
        // 将最终的值取整
        r = Math.round(r);
        g = Math.round(g);
        b = Math.round(b);
     
        return "rgb(" + r + "," + g + "," + b + ")";
    }

[https_blog.csdn.net_teajs_article_details_50124207]: https://blog.csdn.net/teajs/article/details/50124207

发表评论取消回复

表情：

评论列表（有 0 条评论，563人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android Palette 提取图片的主色调

**博主声明**： > 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。 > 本文首发于此博主：[威威喵][Lin...

妖狐艹你老母/ 2024年04月18日 14:13/ 0 赞/ 89 阅读

相关 html5-canvas 图片缩放图像以适合或填充

缩放以适应意味着整个图像将可见，但如果图像与画布的外观不同，则侧面或顶部和底部可能会有一些空白空间。该示例显示了缩放以适合的图像。侧面的蓝色是由于图像与画布的外观不同。

ゝ一纸荒年。/ 2023年10月02日 11:08/ 0 赞/ 28 阅读

相关 vue 获取图片最深的颜色

我们可以使用 JavaScript 的 canvas 元素来获取图片的最深的颜色。在 Vue 中，你可以在 mounted 钩子函数中使用下面的代码来获取图片的最深的颜色：

素颜马尾好姑娘i/ 2023年09月29日 22:47/ 0 赞/ 120 阅读

相关 ps实现半色调图像防伪

目前，包装、票据上应用的防伪手段很多，主要包括以下几类：材料防伪、印前制版防伪（包含版纹防伪、解锁防伪等）、工艺防伪、结构防伪。在众多防伪技术中，真正能做到环保、节省资源、降低

拼搏现实的明天。/ 2022年08月22日 05:55/ 0 赞/ 181 阅读

相关 Cocos2d-js 3.0 颜色变换（调整sprite/图片的色调）

Flash在滤镜方面做得比较成熟，starling也有很多现成的办法。但Cocos2D这里就显得比较单薄，百度/谷歌很少相关资料。后续如果有时间，再慢慢整理各

悠悠/ 2022年08月08日 03:21/ 0 赞/ 165 阅读

相关 Cocos2d-js 3.0 颜色变换（调整sprite/图片的色调）

Flash在滤镜方面做得比较成熟，starling也有很多现成的办法。但Cocos2D这里就显得比较单薄，百度/谷歌很少相关资料。后续如果有时间，再慢慢整理各种滤镜效果

浅浅的花香味﹌/ 2022年08月03日 14:58/ 0 赞/ 131 阅读

相关 canvas(图像)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

本是古典何须时尚/ 2022年06月03日 02:54/ 0 赞/ 204 阅读

相关 android图像处理系列之三－－图片色调饱和度、色相、亮度处理

转自：http://blog.csdn.net/luohai859/article/details/25388441 原图： ![5307672_1323958010aZc

怼烎@/ 2022年05月13日 06:08/ 0 赞/ 251 阅读

相关 Python库：Haishoku一个获取图片主色调和配色

前言 Python具有许多强大的库，本节为大家介绍一个用来获取图片主色调和主要配色方案的python库，依赖于python3和pillow的Haishoku 库。功能

女爷i/ 2022年03月17日 07:20/ 0 赞/ 396 阅读

相关 Canvas获取图像、图片的平均颜色或主色调

转载自：[https://blog.csdn.net/teajs/article/details/50124207][https_blog.csdn.net_teajs_art

深藏阁楼爱情的钟/ 2021年09月16日 17:08/ 0 赞/ 564 阅读