使用 COLOR THIEF 获取图片主色，实现图片渐变遮罩，颜色填充等

使用 COLOR THIEF 获取图片主色，实现图片渐变遮罩，颜色填充等

Color Thief 是用于提取图片的主要颜色或者代表性颜色调色板的工具. 其使用是基于 javascript 和 canvas 的.

COLOR THIEF 引入

这里做简单示例，你也可以使用 npm i --save colorthief 方式引入

COLOR THIEF官方

 <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>

简单的来个html

<div class="app">
    <div>
        <img src="./test.jpg" alt="">
    </div>
    <div style="width: 400px;">
        <div>主色</div>
        <div class="box"></div>
    </div>
</div>

直接使用COLOR THIEF 根据业务需求具体操作就好了 getColor 得到一个数组， 对应rgb

<script>
    const colorThief = new ColorThief();
    const img = document.querySelector('img');
    const box = document.querySelector('.box');
    const getColorFun=()=>{
        let color = colorThief.getColor(img);
        let element = `<div class="colorbox" style="background-color: rgb(${color[0]}, ${color[1]}, ${color[2]});"></div>`;
        box.innerHTML=element;
        console.log(color)
    }
    if (img.complete) {
        getColorFun();
    } else {
        image.addEventListener('load', function () {
            getColorFun(); 
        });
    }
    
</script>

探讨下 ctx.getImageData

参考链接 图像颜色提取
颜色量化算法：中位切分法
看下效果图

var qulity = 100;超过这个就计算
//画布
let ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0,image.width,image.height,0,0,300,150);//图片宽高自定

//读取整张图片的像素。
let data = ctx.getImageData(0, 0,image.width,image.height).data;

//获取到所有rgba，这里与你设定的高宽有关
let rgbArray=new Array();
for(var i=0;i<data.length;i+=4){
    var rdata=data[i]; //240-250
    var gdata=data[i+1]; //70-100
    var bdata=data[i+2];//80-120
    var adata=data[i+3];
    if(adata>125){
        rgbArray.push([rdata,gdata,bdata,adata]);
    }
}
GetColor(rgbArray);

//获取主题色
function GetColor(cube) {
    var maxr = cube[0][0],
        minr = cube[0][0],
        maxg = cube[0][1],
        ming = cube[0][1],
        maxb = cube[0][2],
        minb = cube[0][2];
    /*找出maxr
    minr
    maxg
    ming
    maxb
    minb*/
    for (var i = 0; i < cube.length; i++) {
        if (cube[i][0] > maxr) {
            maxr = cube[i][0];
        }
        if (cube[i][0] < minr) {
            minr = cube[i][0];
        }
        if (cube[i][1] > maxg) {
            maxg = cube[i][1];
        }
        if (cube[i][1] < ming) {
            ming = cube[i][1];
        }
        if (cube[i][2] > maxb) {
            maxb = cube[i][2];
        }
        if (cube[i][2] < minb) {
            minb = cube[i][2];
        }
    }
    if ((maxr - minr) < qulity && (maxg - ming) < qulity && (maxb - minb) < qulity) {
        var r = 0,
            g = 0,
            b = 0;
        for (var i = 0; i < cube.length; i++) {
            r += cube[i][0];
            g += cube[i][1];
            b += cube[i][2];
        }
        var divcolor = document.createElement("div");
        divcolor.style.backgroundColor = "rgba(" + r / (cube.length) + "," + g / (cube.length) + "," + b / (cube
            .length) + ")";
        divcolor.style.width = "100px";
        divcolor.style.height = "100px";
        var html = document.getElementById("imagecolor");
        html.appendChild(divcolor);
    } else {
        var maxrgb = 0;
        var rgbindex = 0;
        var rgbmiddle = 0;
        if ((maxr - minr) > maxrgb) {
            maxrgb = (maxr - minr);
            rgbmiddle = (maxr + minr) / 2
            rgbindex = 0;
        }
        if ((maxg - ming) > maxrgb) {
            maxrgb = (maxg - ming);
            rgbmiddle = (maxg + ming) / 2;
            rgbindex = 1;
        }
        if ((maxb - minb) > maxrgb) {
            maxrgb = (maxb - minb);
            rgbmiddle = (maxb + minb) / 2;
            rgbindex = 2;
        }
        //排序
        cube.sort(function (x, y) {
            return x[rgbindex] - y[rgbindex];
        });
        var cubea = new Array();
        var cubeb = new Array();
        for (var i = 0; i < cube.length; i++) {
            if (cube[i][rgbindex] < rgbmiddle) {
                cubea.push(cube[i]);
            } else {
                cubeb.push(cube[i]);
            }
        }
        GetColor(cubeb);
        GetColor(cubea);
    }
}