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