代码阅读 > 其他 > CSS+Canvas实现图片灰度效果，兼容所有浏览器 CSS+Canvas实现图片灰度效果，兼容所有浏览器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gray</title>
<style>
.item { width: 200px; float: left; margin: 10px; text-align: center; }
.ie { /*filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale = 1);*/ filter: Gray; }
.moz { filter: url(filters.svg#grayscale); }
.webkit { -webkit-filter: grayscale(100%); }
</style>
</head>
<body>
<div>
<div><img src="chrysanthemum.jpg"/></div>
<p>IE</p>
</div>
<div>
<div><img src="chrysanthemum.jpg"/></div>
<p>Google Chrome</p>
</div>
<div>
<div><img src="chrysanthemum.jpg"/></div>
<p>Mozilla Firefox</p>
</div>
<div>
<div><img src="chrysanthemum.jpg"/></div>
<p>Canvas</p>
</div>
<div>
<div><img src="chrysanthemum.jpg"/></div>
<p>All</p>
</div>
<script>
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
var lteIE8 = !-[1,]; //IE8版本以下的<strong>浏览器</strong>
//Canvas
if(!lteIE8){
var _canvas = document.getElementById('canvas');
_canvas.src = grayscale(_canvas.src);
}
//all
var _all = document.getElementById('all');
if(lteIE8){
_all.className = 'ie';
}else{
_all.src = grayscale(_all.src);
}
</script>
</body>
</html>
本文链接
我来评分 :6
已经成功评论!
1
转载注明：转自5lulu技术库
本站遵循：署名-非商业性使用-禁止演绎 3.0 共享协议
相关文章
精彩导读
热门资讯
关注我们
