*、项目中遇到一个图片需要灰度处理的需求。
于是乎,开发第一阶段实现方案是:
.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!
相关推荐
4spec-ICCD相机img格式灰度图的matlab读取,fseek让过头文件。
img 样式 img 样式 img 样式img 样式 img 样式 img 样式img 样式 img 样式 img 样式img 样式 img 样式 img 样式img 样式 img 样式 img 样式img 样式 img 样式 img 样式img 样式 img 样式 img 样式img 样式 img 样式 ...
Vue2图像灰度处理两种方式源码
对彩色和灰度图像双边滤波 保持边缘并滤除噪声 % Introduce AWGN into test images. % Note: This will show the benefit of bilateral filtering. img1 = img1+0.03*randn(size(img1)); img2 = img2+0.03*randn...
1、将需要进行灰度拉伸的图片放到rawdata目录下 2、运行grayStretch.exe之后,处理结果保存在result目录下 3、此种方法是将原来的灰度拉伸至0到255之间,即x1是源图像灰度中的最小值,y1为0 x2为源图像灰度中的最大...
可用附件中的simg2img.exe来转化一下原始的system.img,然后再用其中的ext2Explorer来浏览提取system.img中的内容。 用法:1、将system.img改名为system.img.ext4。2、命令行cd到simg2img.exe目录下,执行命令“simg...
二、显示灰度数据:把IMG_008.jpg=800=600=.dat拖放到showdat.exe上即可。 本软件是软能动力(北京)科技有限责任公司的作品。 禁止以盈利为目地进行销售、发布,以及私自窜改软 件程序内容,允许个人转载、发布。
在Proxmox VE虚拟机中将*.img镜像文件导入的工具 img转kvm工具 (此工具文件名无后缀) 使用方法: 把需要的img镜像文件和img2kvm文件上传到主机的root目录 输入以下两行代码(假设iso文件名为openwrt.img): ...
2.1-T_S905L-B_兼容高安非高安主板固件纯净水版.img
BOOT.img和recovery.img解包打包工具,支持高通和mtk的cpu,手机刷机制作刷机包利器,兼容2012年到2018年的cpu,移植recovery必备工具
simg2img 可以将android编译生成的system.img转换成raw img文件,查看android rom包的时候,不需要先刷机再去手机里看相应内容,直接就可以看rom包内文件。
使用opencv将图片转为灰度图主要有两种方法,第一种是将彩色图转为灰度图,第二种是在使用OpenCV读取图片的时候直接读取为灰度图。 将彩色图转为灰度图 import cv2 import numpy as np if __name__ == __main__: ...
DMG2IMG 是Apple 的一个压缩dmg 到标准(hfsplus)图像磁盘文件的转换工具。 变更日志: dmg2img-1.6.7: 2017 年 2 月 9 日 Peter Wu 固定缓冲区欠载 运行到列表分区时避免截断 .img 文件 dmg2img-1.6.6: 2017 ...
安卓系统boot.img和recovery.img及system.img文件解包打包工具,Windows下使用,适用于联发科及高通芯片
Matlab图像处理基础,读取图像、灰度化、画灰度直方图、迭代法实现自动阈值分割
img2kvm是一个在PVE下将OW固件添加到VM的工具,可以方便地将固件文件(包括gz方式的压缩格式)快速添加到OW虚拟机中,从而简化让人工操作的麻烦。 若是你的PVE主机能访问Internet,可以直接下载到目录“/usr/bin”...
ubuntu 解包打包 img
ubuntu下 .img 镜像的制作ubuntu下 .img 镜像的制作ubuntu下 .img 镜像的制作ubuntu下 .img 镜像的制作