html5 解析圖片

一 圖片預覽
HTML5給web開發帶來很多好東西，可以說，它將開創新一代web開發。
其中canvas就是它帶來的東西之一，canvas非常強大，可以做到很多東西。這里只是展示一個簡單的canvas效果。如下圖：

二 原理介紹
在代碼中通過ctx.getImageData(0,0,width,height);獲取canvas里面的p_w_picpathdata對象，而這個對象就是這個效果實現的關鍵。
通過p_w_picpathdata.data來獲取一個數組，這個數組的length是canvas像素數量的四倍，其中每四個項代表一個像素。在每四個項里，他們一次代表rgba，rgb就很明顯了，而a就代表透明，當a為255的時候完全不透明，當a為0的時候就是透明的。而這次的效果無需用到透明，所以沒對這個進行操作。
最后通過ctx.putImageData(p_w_picpathData,0,0);把處理過的Imagedata放回去。請注意看代碼以及注釋。

1. window.onload = function() {
   

2.      
   

3.        
   

4.        var photo=document.getElementById("photo");
   

5.        photo.onload=function(){//把圖像處理函數添加為目標圖片的onload時間，因為只有圖片已經加載，才能用canvas對其進行操作
   

6.         var cav=document.getElementById("cav");//獲取canvas對象
   

7.        var ctx=cav.getContext("2d");//通過這個函數獲取canvas的上下文
   

8.        
   

9.        var width=parseInt(cav.getAttribute("width"));
   

10.        var height=parseInt(cav.getAttribute("height"));
    

11.        ctx.drawImage(this,0,0);//將圖片“畫到”canvas上去
    

12.        
    

13.        var p_w_picpathData=ctx.getImageData(0,0,width,height);//取得canvas的p_w_picpathData，我們就是通過這個對canvas進行像素操作的
    

14.        var data=p_w_picpathData.data;
    

15.        
    

16.        for(var i=0,length=data.length;i<length;i=i+4)//data里面每4個數據項代表一個像素
    

17.        {
    

18.        data[i]=255-data[i];//紅
    

19.          data[i+1]=255-data[i+1];//綠
    

20.            data[i+2]=255-data[i+2];//藍
    

21.        }
    

22.        
    

23.        ctx.putImageData(p_w_picpathData,0,0);//把p_w_picpathData再放回canvas
    

24.        
    

25.        }
    

26.        photo.src="canvas-women.jpg";
    

27.        
    

28.        
    

29.      }