使用 COLOR THIEF 获取图片主色，实现图片渐变遮罩，颜色填充等
Color Thief 是用于提取图片的主要颜色或者代表性颜色调色板的工具. 其使用是基于 javascript 和 canvas 的.
COLOR THIEF 引入
这里做简单示例，你也可以使用 npm i --save colorthief 方式引入
COLOR THIEF官方
<script src="/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 (plete) {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-250var gdata=data[i+1]; //70-100var bdata=data[i+2];//80-120var 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];/*找出maxrminrmaxgmingmaxbminb*/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) / 2rgbindex = 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);}}
