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

时间 2019-11-17 标签 css+canvas+jqury css canvas jqury 实现图片灰度渐变效果

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

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

如何实现图片灰度效果请阅读下面两篇文章
        CSS实现图片灰度效果
         CSS+Canvas实现图片灰度效果，兼容全部浏览器

html

<!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标签连接失效。jquery