标签：gray img 方案 处理 filter 灰度 IE10 Css

网站变灰这个效果很常见，在我这里暂时没有找到最优解决方式，

先把今天的研究结果记录一下。

第一种方案 ：

对所有静态资源文件进行灰度处理，得到新一个资源目录，例如asset_ori 原始资源    asset_gray灰度资源，将文件映射指向灰度资源

这里面包括对img以及css中所有颜色属性的处理，css里面最好不要有red,green这种字母颜色，但是还是会有#xyz,rgb(x,y,z),rgba(x,y,z,o)

灰度算法

临时变量=(原红色值*30+原绿色值*59+原蓝色值*11)/100; 
原红色值=临时变量; 
原绿色值=临时变量; 
原蓝色值=临时变量; 

第二种方案 CSS方案：

针对IE10以下    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

针对IE10　　　 不支持filter

针对chrome 　  filter:grayscale(1);

针对firefox　　  filter: url(desaturate.svg#grayscale);  利用svg，经测试，发现只能运用在img元素上，其他元素上运用直接不可见了

针对Opera　　   暂未找

第三种方案 js方案

不说性能，先说原理，利用canvas对图片进行灰度处理，得到base64的新图像数据，可以直接设置在img的src或者element的backgroud-image上。

为了达到这个目的，可以在样式中预留出需要重新编译的部分，比如 .add.gray,  .upload.gray，使用js将里面的background-image重新设置

这个方案最终接近于第一种方案，只不过处理的动作和时间放在了客户端

 

三种方案比较

第一种是完美的，可以写个通用程序处理，工作量也不大，但是对于海量图片，这磁盘消耗就X2了，如果再有CDN，那消耗就更大了

第二种很便捷，不完美，有浏览器兼容问题。

第三种看起来很美，能完美处理，处理动作和时间都放在了客户端，只是优化的问题还需要再考虑

综合起来

我倾向于三种综合处理，根据场景，1||1+2||1+2+3，尽可能地利用原生CSS的能力

 

 

转载于:https://www.cnblogs.com/jamesldj/p/3354474.html

标签：gray,img,方案,处理,filter,灰度,IE10,Css
来源： https://blog.csdn.net/weixin_33950035/article/details/93771024

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。