您的位置：首页 > Web前端 > CSS

CSS+Canvas+jQury实现图片灰度渐变效果

2012-07-06 18:16 781 查看
之前在制作图片灰度渐变特效时都是通过事先准备好两张图片，一张彩色图片、一张灰色图片，然后通过CSS定位把灰色图片叠放到彩色图片上，鼠标移入时用jQury把灰色图像的透明度渐变为0，鼠标移出时再把灰色图片透明度渐变为1，这样就实现了图片的灰度渐变效果。但这种实现方式每张图片都要加载两张图片，影响网页打开的速度，如果图片是通过后台上传的话那就更麻烦了，每次都要上传两张图片，而且客户可不一定会使用图像处理软件把图片变为灰色哦。

这两天研究了图片灰度实现的问题，其实完全可以利用CSS滤镜和HTML5的画布功能让彩色图片以灰度的方式呈现在浏览器上，之前的问题就迎难而解了。

如何实现图片灰度效果请阅读下面两篇文章
CSS实现图片灰度效果
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; }

.box { width:200px; height:150px; position: relative; }
.box img { position: absolute; top:0; left:0; }
.img-color { z-index: 2; filter:alpha(opacity=0); opacity:0; }
.img-gray { z-index: 1;}
</style>
<script src="jquery.js"></script>
</head>

<body>
<div id="animate" class="box"><img id="img-color" class="img-color" src="chrysanthemum.jpg"/><img id="img-gray" class="img-gray" src="chrysanthemum.jpg"/></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();
}

window.onload = function(){
var lteIE8 = !-[1,]; //IE8版本以下浏览器

var _imgColor = $('#img-color'), _imgGray = $('#img-gray');

//图片灰度效果
if(lteIE8){
_imgGray.addClass('ie');
}else{
_imgGray.attr('src', grayscale(_imgGray.attr('src')));
}

//动画
_imgColor.hover(
function(){
$(this).stop().animate({opacity:1}, 1000);
},
function(){
$(this).stop().animate({opacity:0}, 1000);
}
)
}
</script>
</body>
</html>

图片渐变的效果还是一样通过jQury改变图片透明度的方式实现，不同的是现在彩图和灰图用到的时同一张图片，浏览器不用额外加载多一张图。
注意：这次是彩色图片叠加在灰色图片上，通过改变彩色图片的透明度来实现渐变效果的，之所以这么做是因为在IE6下给图片使用灰度滤镜后会让外层的a标签链接失效。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航