在实际的页面开发中

* 我们是不是经常会遇到定宽的图片不能占满100%屏幕的尴尬

* 我们是不是也在为不同的图片都使用同一种背景色而苦恼

。。。

lovee可以帮助你们解决以上所有问题，lovee提供了三种方式来根据提供的图片生成合适的背景色

demo地址

# 第一种

通过读取图片数据，分析每个像素点，然后按根据颜色值做map，得到每一个颜色值出现的次数，然后按照出现次数的大小排序，截取次数大于一定值得颜色组，最后按照颜色明亮度排序，从而生成渐变颜色

效果如下:

优点：

能够生成非常符合图片的渐变色和文字颜色

缺点：

当图片过多过大，计算压力大，性能有影响

#第二种

利用svg的blur对图片进行模糊处理，能大致保留原图片的颜色区域，有时候能达到非常棒的效果

效果如下：

优点：

完全以图片作为背景色，速度极快，还原高

缺点：

如果图片本身颜色很多，背景色就会显得有点乱

#第三种

通过读取图片数据,取图片最左边或者最右边的1px的数据，然后平铺

效果如下

优点：

能达到浑然一体的感觉

缺点

如果图片最左边或最右边1px中内容颜色差值过大，会产生很明显的线纹