javascript提取图片主要颜色

颜色"/>

javascript提取图片主要颜色

本文主要整理前人的文章，并增强色彩饱和度，在此记录留用

基础html结构

<span style='display: inline-block;width:200px;height: 200px;' id='span'>预览</span>
<img id="imgs" src="http://127.0.0.1:8081/rgb1.jpg" alt="" width="300" height="400">

借助 canvas 提取图片主要 rgb 色值

var img = document.getElementById('imgs');var span = document.getElementById('span');function getImageColor(img) {var canvas = document.createElement('canvas')canvas.width = img.width;canvas.height = img.height;var context = canvas.getContext("2d");img.crossOrigin = "Anonymous"context.drawImage(img, 0, 0, canvas.width, canvas.height);// 获取像素数据var data = context.getImageData(0, 0, img.width, img.height).data;console.log(data)var r = 1,g = 1,b = 1;// 取所有像素的平均值for (var row = 0; row < img.height; row++) {for (var col = 0; col < img.width; col++) {// console.log(data[((img.width * row) + col) * 4])if (row == 0) {r += data[((img.width * row) + col)];g += data[((img.width * row) + col) + 1];b += data[((img.width * row) + col) + 2];} else {r += data[((img.width * row) + col) * 4];g += data[((img.width * row) + col) * 4 + 1];b += data[((img.width * row) + col) * 4 + 2];}}}console.log(r, g, b)// 求取平均值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);console.log(r, g, b)return [r, g, b]}

将rgb色转位hsl色并增强 s，l值

   function rgbtohsl(rgb) {r = rgb[0] / 255;g = rgb[1] / 255;b = rgb[2] / 255;var min = Math.min(r, g, b);var max = Math.max(r, g, b);var l = (min + max) / 2;var difference = max - min;var h, s, l;if (max == min) {h = 0;s = 0;} else {s = l > 0.5 ? difference / (2.0 - max - min) : difference / (max + min);switch (max) {case r:h = (g - b) / difference + (g < b ? 6 : 0);break;case g:h = 2.0 + (b - r) / difference;break;case b:h = 4.0 + (r - g) / difference;break;}h = Math.round(h * 60);}s = Math.round(s * 100 * 1.5)+ '%'; //转换成百分比的形式l = Math.round(l * 100 * 0.8)+ '%';const str = "hsl(" + h + "," + s + "," + l + ")";console.log('str', str)return str}

调用方法

   img.onload = function () {const rgb = getImageColor(img)const hsl = rgbtohsl(rgb)span.style.background = hsl}