在现实开发中，经常会遇到根据轮播图等场景，然后设置附近元素背景色来达到界面统一的效果，之前可能是直接取色器取一下，和图片对应好，保存到库里，相当麻烦而且容易出错。本文精心打造了一个智能获取，提供可靠性数据，大大减少了工作力度以及后续维护成本。

演示效果：

拾色器代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function getAverageRGB(imgEl) {
    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {r:0,g:0,b:0},
        count = 0;

    if (!context) {
        return defaultRGB;
    }

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

    context.drawImage(imgEl, 0, 0);

    try {
        data = context.getImageData(0, 0, width, height);
    } catch(e) {
        /* security error, img on diff domain */
        return defaultRGB;
    }

    length = data.data.length;

    while ( (i += blockSize * 4) < length ) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i+1];
        rgb.b += data.data[i+2];
    }

    // ~~ used to floor values
    rgb.r = ~~(rgb.r/count);
    rgb.g = ~~(rgb.g/count);
    rgb.b = ~~(rgb.b/count);

    return rgb;
}

反转色彩代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
function reverse() {
	// 获取背景图片的平均色
	var rgb = getAverageRGB(document.getElementById('img'));
	// 获取字体元素
	var d = document.getElementById("d1");
	// 设置div背景颜色为图片平均色
	document.getElementById('distinguish').style.background='rgb('+rgb.r+','+rgb.g+','+rgb.b+')'
	var r = 255 - rgb.r
	var g = 255 - rgb.g
	var b = 255 - rgb.b
	// 设置字体颜色
    d.style.color='rgb('+r+','+g+','+b+')'; 
}