圖片展示網頁往往色彩繁雜，當一個網頁上有多張圖片的時候用戶的注意力就很不容易集中，而且會造成網站整個色調風格的不可把控。
能不能把所有的預覽圖變成灰度圖片，等用戶激活某張圖片的時候再上色呢？
以前，唯一的方法就是讓美工做兩張圖，一張彩色一張黑白，費時費力。
能不能讓js對圖片進行一些處理呢？幸運的是，canvas就提供了圖片處理的方法。
canvas+js可以讓我們對圖片進行像素級的操作，我們可以通過操作圖像的像素實現各種圖片處理效果,如模糊，馬賽克，液化，調色等等。
詳細代碼及注釋如下：
<!doctype html> <html> <head> <title>Canvas圖像處理demo-by-@謝帥shawn</title> <meta charset='utf-8' /> <script src="jQuery.js" type="text/javascript"></script> <style> h1{text-align:center;} .outer{width:800px;margin:0 auto;} img{border:0;width:200px;height:350px;margin:0;padding:0;} </style> </head> <body> <h1>Canvas圖像處理demo</h1> <div class='outer'> <img class='image' src='images/1.jpg'/> <img class='image' src='images/2.jpg'/> <img class='image' src='images/3.jpg'/> <img class='image' src='images/4.jpg'/> <img class='image' src='images/5.jpg'/> </div> <script>
/*等圖片加載完成后再執行（若圖片沒有加載完成，則不能正常進行圖片處理）*/ $(window).load(function(){
/*克隆一張原圖，把當前圖片變為灰度圖*/ $('.image').each(function(){ $(this).css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block;position:relative;float:left;'></div>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore($(this)); $('.img_wrapper').css({'height':$(this).height(),'width':$(this).width()}); this.src=huidu(this.src); });
/*通過控制彩色圖片的透明度模擬上色效果*/ $('.img_wrapper').mouseover(function(){ $(this).find('img:first').stop().animate({opacity:1},100); }) $('.img_wrapper').mouseout(function(){ $(this).find('img:first').stop().animate({opacity:0},100); }); /*
*function
*函數名稱：huidu
*功能：把圖片轉換為灰度圖
*參數：src（原圖的url）
*返回值：（轉換完成后的圖片url）
*/ function huidu(src){
/*創建一個canvas*/ var canvas=document.createElement('canvas'); var ctx=canvas.getContext('2d'); var img=new Image(); img.src=src; canvas.height=img.height; canvas.width=img.width; ctx.drawImage(img,0,0); var imgdata=ctx.getImageData(0,0,canvas.width,canvas.height);var data=imgdata.data;
/*灰度處理：求r，g，b的均值，並賦回給r，g，b*/ for(var i=0,n=data.length;i<n;i+=4){ var average=(data[i]+data[i+1]+data[i+2])/3; data[i]=average; data[i+1]=average; data[i+2]=average; } ctx.putImageData(imgdata,0,0);
/*返回處理之后的src*/ return canvas.toDataURL(); } }); </script> </body> </html>