『XXG探索』canvas 获取图片主体颜色

2022-07-11 本文已影响0人谢夏戈

👋 本文章为我(XXG)原创，由于个人能力有限，此笔记可能会错漏、过时、或需要补充。
📖 笔记文章由于多平台发布，为了修改方便，可以参观我的博客：https://xxggg.github.io
🚀 我会根据我的知识学习，持续更新、完善这些笔记。让它更加通俗易懂，少错误。
🐤 本文章对应博客里的：https://xxggg.github.io/Explore/2022/GetMainColor.html

🟥 前言！

前段时间我看了Procreate的官方画展网站：https://folio.procreate.art/showcase

Procreate是一款ipad的绘画软件

当我的鼠标移动到图片上面去的时候，他会有一个图片浮空的阴影！

其实制作图片阴影是非常简单的，css3里面就有一个box-shadow

但是这里的关键是！每张图片的阴影都是根据图片的【主体综合颜色】来制作的！

🟥 那么问题就来了！如何获取图片的综合颜色？

使用HTML5里的canvas，把图片丢进去~
然后用canvas的方法 getImageData 来拿到画布上每个像素点的颜色
利用循环遍历把上方得到的【像素点颜色-数组】做一个运算

🟧 HMTL5里canvas的getImageData

canvas教程：https://www.runoob.com/html/html5-canvas.html

canvas的getImageDate可以得到canvas画布里每个像素点的颜色！

把图片丢进canvas的画布里
用canvas的getImageDate属性获得画布每个像素点的信息集
根据信息集做遍历，计算rgba里每一个值的平均值，以此获得一个综合颜色！

img是图片 👇
cnavas是画布 👇

<img src="./img/test.jpg" width="200px" id="scream">
<canvas id="myCanvas" width="200" height="300" style="border:1px solid #c3c3c3;"></canvas>

var img = document.getElementById("scream"); //图片节点
var c = document.getElementById("myCanvas");  //canvas元素

function rgba() {
    c.width = img.width
    c.height = img.height
    var ctx = c.getContext("2d"); 
    //getContext("2d") 对象是内建的 HTML5 对象，
    //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    
    ctx.drawImage(img, 0, 0, c.width, c.height); 
    //把图片画入画布(图片节点，左上角开始的x,y, 画入图片的宽，高)

    var imgData = ctx.getImageData(0, 0, c.width, c.height);
     //getImageDate 得到画布里的图片信息(画布的四个角)

    // console.log(imgData) //看一下取出来的数据对象！

    // 取所有像素的平均值
    let r = 0;
    let g = 0;
    let b = 0;
    let a = 0;
    for (let row = 0; row < c.height; row++) {
        for (let col = 0; col < c.width; col++) {
            r += imgData.data[((c.width * row) + col) * 4];
            g += imgData.data[((c.width * row) + col) * 4 + 1];
            b += imgData.data[((c.width * row) + col) * 4 + 2];
            a += imgData.data[((c.width * row) + col) * 4 + 3];
        }
    }

    // 求取平均值
    r /= (c.width * c.height);
    g /= (c.width * c.height);
    b /= (c.width * c.height);
    a /= (c.width * c.height);

    // 将最终的值取整
    r = Math.round(r);
    g = Math.round(g);
    b = Math.round(b);
    a = Math.round(a);

    let rgba = {
        r,
        g,
        b,
        a,
    }
    console.log(rgba)
    return rgba
}