lovee 通过图片生成相应的背景色
2017-02-09 本文已影响0人
千年骚法
在实际的页面开发中
* 我们是不是经常会遇到定宽的图片不能占满100%屏幕的尴尬
* 我们是不是也在为不同的图片都使用同一种背景色而苦恼
。。。
lovee可以帮助你们解决以上所有问题，lovee提供了三种方式来根据提供的图片生成合适的背景色
# 第一种
通过读取图片数据，分析每个像素点，然后按根据颜色值做map，得到每一个颜色值出现的次数，然后按照出现次数的大小排序，截取次数大于一定值得颜色组，最后按照颜色明亮度排序，从而生成渐变颜色
效果如下:
优点：
能够生成非常符合图片的渐变色和文字颜色
缺点：
当图片过多过大，计算压力大，性能有影响
#第二种
利用svg的blur对图片进行模糊处理，能大致保留原图片的颜色区域，有时候能达到非常棒的效果
效果如下：
优点：
完全以图片作为背景色，速度极快，还原高
缺点：
如果图片本身颜色很多，背景色就会显得有点乱
#第三种
通过读取图片数据,取图片最左边或者最右边的1px的数据，然后平铺
效果如下
优点：
能达到浑然一体的感觉
缺点
如果图片最左边或最右边1px中内容颜色差值过大，会产生很明显的线纹
