CSS3滤镜及Canvas.docVIP

CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　 ?? ? IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅 Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！本篇为先占个坑，以后慢慢填^_^！！！ ? CSS3 Filter兼容性表 ?? ? SVG effect for HTML兼容性表 ?? ??下文将探讨以下滤镜！ ??Speia滤镜?? ??灰度图滤镜?? ??高斯模糊滤镜?? ??反色滤镜?? ??饱和度滤镜?? ?? ??对比度滤镜?? ?亮度滤镜?? ? ? ?色相旋转滤镜?? ? ?阴影滤镜 ? 先P张原图作参考系（清纯MM哦！！） ? ?? ? 二、Speia滤镜(Speia)　　　　　　　　　　　　　　　　　　　　　　 ? Speia滤镜是对图片或元素整体进行棕褐色处理，就是老照片那种效果。下面直接看疗效！ ?? ? ?看，岁月的痕迹啊，是不是有妈妈年代的感觉呢？！ ? ?1. CSS3滤镜实现 style type=text/css .sepia{ /** 格式，filer: sepia(效果范围) * 效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果 */ -webkit-filter: sepia(100%); -moz-filter:sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); } /style div class=sepia style=background:url(./mm.jpg)/div ? ?? ? ?2. IE5.5~9特的处理方式（待研究） ? ? ? 尝试过IE滤镜?filter:progid:XDImageTransform.Microsoft.MaskFilter(color=颜色)?，仅仅能使用gif图片（其他格式的图片将导致整个元素消失不见），而且遮罩层与图片重合的部分将变为空白一片，另外在IE11浏览器文档模式为5.5~9下滤镜均失效（元素按照没有设置滤镜的方式被渲染显示）。结论：IE滤镜无法处理Sepia效果。 ? ? ? 而通过js填坑方面，想法1：在元素表面附加一层半透明棕褐色的遮罩层，但效果与CSS3 Filter相距甚远，失败告终。。。。。。。 ? ? ?3. FF和IE10+的处理方式 ? ? ? 可使用Canvas作处理，下面是简单实现的代码，目标元素?img id=sepia src=./mm.jpg/? // 定义处理方法 var sepia = function(el){ var canvas = document.createElement(‘canvas‘); var w = canvas.width = el.offsetWidth, h = canvas.height = el.offsetHeight; var ctx = canvas.getContext(‘2d‘); ctx.drawImage(el, 0, 0); // 对像素作处理 var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data; for (int i = 0, len = d.length; i len; i+=4){ var r = d[i], g = d[i+1], b = d[i+2]; d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189); d[i+1] = (r * 0.349)+(g * 0.686)+(b * 0.168); d[i+2] = (r * 0.272)+(g * 0.534)+(b * 0.131); } ctx.putImageData(imgData, 0, 0); // 导出 var img = new Image(); img.src = ctx.toDataURL(image/*); return img; }