欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

img之灰度兼容

程序员文章站 2022-03-05 14:16:00
...

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

 

    于是乎,开发第一阶段实现方案是:

.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!