前几天遇到了获取图片主题色的需求，于是去找了一些相关的博客，发现实现起来相当简单，于是自己开发了一个获取图片主题色的网站：ColorfulImg 欢迎Star~
实现思路
主要是通过canvas的getImageData()方法获取图片每个像素点的rgba数据。通过取得平均值的方法来算出图片主题色。
所以要想实现此效果有两个限制：
- 网站和图片必须是相同的域名（getImageData()限制图片必须同源）
- 浏览器必须支持canvas
在canvas中绘制img图像
- 首先我们要新建一个canvas标签并且访问它的绘画上下文：
let canvas = document.createElement('canvas')
let context = canvas.getContext && canvas.getContext('2d')
- 绘制img图像，X轴与Y轴的起始点都设置为0：
let myImg = document.getElementById('myImg')
context.drawImage(myImg , 0, 0)
获取图片颜色数据getImageData()
getImageData()这个API需要四个参数，前两个是获取图片数据的起点，后两个是提取的图像数据矩形区域的宽度和高度，我们要得到图片全部的数据所以后两个参数就是图片的宽高，于此同时我们也要把canvas的宽高设置为图片的宽高能完全装下图片。
let height = canvas.height = imgEl.height
let width = canvas.width = imgEl.width
let data = context.getImageData(0, 0, width, height).data
在我第一次测试的时候遇到了跨域的问题：
图片如果不同源的话必须要加crossorigin="anonymous"的属性，并且服务器存储那边也要开放相应的权限才行。
<img id="img" crossorigin="anonymous">
处理获取的颜色数据
我们先log一下拿到的数据是什么吧：
是一个有着一堆数据的数组，这些数据是什么呢？我们先看一下MDN：
也就是说按顺序来看前四位组成一个以RGBA顺序的数据：
rgba(red, green, blue, alpha)
对于获取的图片数据透明度（alpha）都是255也就是不透明的所以我们不对透明度做处理，之后我们只需要把rgb的其他三个值分别求和再取均值就可以得到图片的主题色了！
let count = 0
let i = 0
let blockSize = 1
while ( (i += blockSize * 4) < length ) {
++count
rgb.r = data[i] + rgb.r
rgb.g = data[i+1] + rgb.g
rgb.b = data[i+2] + rgb.b
}
rgb.r = ~~(rgb.r/count)
rgb.g = ~~(rgb.g/count)
rgb.b = ~~(rgb.b/count)
最终代码
function colorfulImg(img){
let canvas = document.createElement('canvas'),
context = canvas.getContext && canvas.getContext('2d'),
height,width,length,data,
i = -4,
blockSize = 5,
count = 0,
rgb = {r:0,g:0,b:0}
height = canvas.height = imgEl.height
width = canvas.width = imgEl.width
context.drawImage(imgEl, 0, 0);
data = context.getImageData(0, 0, width, height).data
length = data.length
while ( (i += blockSize * 4) < length ) {
++count;
rgb.r += data[i];
rgb.g += data[i+1];
rgb.b += data[i+2];
}
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);
return rgb;
}
