网页最麻烦的就是配色。

更麻烦的就是你好不容易配色好了，结果图片一换，颜色还得重来。。。

如果要求不高的话，能让字看出来就好了，但这个目的在遇到奇葩换图的时候还是会蛋疼。

比如说，今天的背景图是深色，你来一个白色的字，结果第二天换图成了白色图片，立刻抓瞎。

所以，要用JS来实现自动简单配色的话，事情就简单多了——大概吧。。。

要做到这个工作，需要三个步骤。

第一，找出目标文字的“背景图”。

第二，找出背景图在文字所在区域的颜色范围。

第三，修改文字的颜色，按照一定的规则。

这里只讲大致的思路，熟悉JS和HTML5的话，有了思路很快就能出成果了。

第一步，找出图片。

document.querySelectorAll('img')这个是最先想到的。

但你要知道，背景图可以不单单是img标签所给的图，还可能是div等的background，所以光有这个还不行。

你需要搜索所有含有background或者background-image这两个style字段的标签，找到以后读取字段中的url部分，并解析获得图片实际路径。如果是填充色或者渐变色的，也可以通过css获得具体的值，很容易。

这部分还要注意repeat属性和size属性，这个都考验计算的功力——涉及到的和尺寸计算所要的量都可以通过对象的getBoudingClientRect来获得。

因此，无论是背景图，还是背景背景图，现在就都能获得了。

接下来，就是根据对象的实际位置和大小，来判断是否成为了指定文字的“背景”。

这里还是使用getBoundingClientRect来判断各元素的位置，并由此得到“背景”——需要注意的是，opacity为0的，display为none的，visibility为hidden的，都可以不用考虑在内。

如果有多个图片都在指定区域范围内——准确地说，是图片和文字所在区块有交集——那么你还要通过层级关系、z-index、transform的translateZ属性来获得上下关系，后者的话还要考虑父容器是否设置了perspective启用3D。繁琐是繁琐了点，但只要仔细，都不是什么大问题。

第二步，找图出片中和文字相关的区域。

找到了图片，有了图片的位置和尺寸，接下来就是找到区域。

不单单是找到区域，还要找出这个区域的像素。

这里使用的就是HTML5中的Canvas对象了。

将图片载入Canvas对象，Canvas的大小和图片的实际尺寸相当——如果是background属性调用的话要注意repeat和size这两个属性，然后所用都要注意是否使用了zoom（2D的CSS3属性）或者scale（3D的CSS3属性，而且这货还分scaleX和scaleY）。根据实际CSS来控制Canvas的大小和纵横比，然后在Canvas中绘制图片。

接着，利用文字区块的所在区域——还是那个getBoundingClientRect，计算和图片的相对位置，从而取得要截取的Canvas位置，使用getData获得数据——是RGBA值。

此外要注意的是图片本身设置的和透明度相关的css属性——在现代浏览器上还有变色的filter这个css3属性，这两个要注意。好在无论是反色还是灰度还是黑白等等变化都可以通过简单的算法来对最后的像素结果做处理。

接下来的是就容易了。

如果是多个图片的合成区域，就根据图片之间的叠加关系来除了getData的像素结果，最后生成一块Data。

有了像素数据，做一个平均，或者根据你个人的喜好或者美工需求来获得一个数字。

打完收工。

第三步，设置图片颜色。

有了第二部获得RGBA值得，接下来就是根据反色或者别的需求来获得文字的RGBA值。

可以通过一定的数据分析来判断上述背景区域是否需要分块处理，比如左面是白色，右面是黑色，这个就看你数据处理的能力了，一般使用像素值的剃度变化量就可以做到这件事。

如果需要分块的，那么使用不可见的span套用和目标文字块相同的css属性，然后通过试错法来获得分块。

有了分块，有了背景色，接下来就是CSS设置文字颜色的事了，这部分轻松愉快，不废话。

上面就是一个自动设置背景的JS插件的基本思路，有兴趣的朋友可以自己做哦～～～～

－－－－－－－－－－－－

当然，需要注意的是：这个方法本身是“泛用型”的，也就是说，不管是什么网页，丢上去就能用（只要浏览器达到现代水平）。

但，对于一些特定类型的网站其实不需要这么泛用，可以是具有很强针对性的方案。

比如说，这个网页是我做的，背景在哪里我知道，只不过背景图片是随机抽的一张图片。如果是这样的话，上述寻找图片和绘制区域的过程都可以省略，直接写成参数就可以了，这样可以节约很多工作量。

所以，推荐是有针对性地使用背景自动匹配，而不是泛用型的，毕竟我们也要为别人的浏览器考虑考虑，不是么？

==================

当然，上面是将工作放到前段来完成的方法，工作压力都在前段。

但，事实上也可以把这个自动化的工作交给后端来完成——

使用PhantomJS绘制一个没有指定文字区域的页面截图，然后NodeJS使用成熟的图形库（以前我自己做过一个基于Cairo的NodeJS的图像处理插件，也有成熟的NodeCanvas库或者NodeWebkit解决方案）来获得像素，最后算出文字的颜色——下面是关键——将颜色写在文件名里，然后前段根据URL中的背景图片的文件名就知道自己应该是什么颜色了。

这个操作仅仅在图片入库的时候进行一次，之后前后段都没有工作量，而且也可以不用考虑前段浏览器居然是老旧的IE这样的非人类问题。

当然，现代浏览器的话结合LocalStorage也可以做到仅入库的时候做一次自动抓取背景色的工作，但总是比较麻烦的。