img之灰度兼容

*、项目中遇到一个图片需要灰度处理的需求。

于是乎，开发第一阶段实现方案是：

.gray { 
    -webkit-filter: grayscale(90%);
    -moz-filter: grayscale(90%);
    -ms-filter: grayscale(90%);
    -o-filter: grayscale(90%);
    filter: grayscale(90%);
    filter: gray;
}

本来挺高兴，因为大多数浏览器filter是有效的，然而让人抓狂的IE就是会给你开玩笑，因为IE10以上是不支持filter，于是乎出现了第二版实现方案：

css调用
.gray { 
    filter: url(gray.svg#grayscale);
}

gray.svg文件
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

然而该方法我并未成功集成，郁闷中，最后无奈间找到了一个炒鸡链接找到了宝藏

引用js文件-可转储到本地哦，你懂的
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

调用该js中的函数
$("img”).grayscale();即可

该方法也有不完美的地方比如说图片还未加载完，那么执行灰度肯定是失败的，所以需要以下小操作

1、首先让图片每次都重新加载,时间戳什么的！！！
2、先执行灰度指令，然后再为img赋予src属性，所以此前可以先用srctemp属性暂存src应有的值。
3、更新src后就能看到效果了，棒棒的！
我的代码：
if($(this).attr("过滤条件") != '') {
	$(this).load(function(){
		grayscale($(this));
	});
        缓存地址赋值给src
	$(this).attr("src",$(this).attr("srctemp"));
}

然而在chrome中遇到了一个无限加载图片的问题，导致内存一直在狂飙，所以需要以下小操作

判断若是chrome的话就不需要该js的操作了！
if(不是chrome) {//因为chrome对filter的支持较好，所以不执行灰度函数亦可
   grayscale($(this));
}
原因是因为：
（我发现的浏览器2017年9月18日14:55:36）chrome和火狐
需要这样调用document.createElement('canvas').getContext('2d')
而其他浏览器是document.createElement('canvas')[0].getContext('2d');

-------------------------------------------------------------------资源小仓库-------------------------------------------------------------

*、多种灰度方案的集合体

http://www.zhangxinxu.com/wordpress/2012/08/css-svg-filter-image-grayscale/

*、图片预加载参考方案

http://blog.csdn.net/kongjiea/article/details/24308053

*、判断浏览器的类型

//判断是什么类型的浏览器
function getBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
	  return "Chrome";
	 }
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
}

至此2017年9月18日14:34:49,各种浏览器的不兼容告一段落，perfect！

猜你喜欢