前兩天無(wú)意中看了下《pro html5 programming》,發(fā)現(xiàn)html5竟然也能很好的支持圖像處理，在此稍稍交代一下。

創(chuàng)新互聯(lián)建站10多年企業(yè)網(wǎng)站建設(shè)服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站建設(shè)及推廣,對(duì)木托盤等多個(gè)領(lǐng)域擁有豐富的網(wǎng)站運(yùn)維經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

與matlab處理圖像類似的是，這里也是采用圖像矩陣的形式。

下面就介紹一個(gè)簡(jiǎn)單的例子:

 
 
 
 
  
  
  
  
      
  
  
  
  
   
  
  
  
  
      
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
canvas
     
  
  
  
  
是時(shí)候更換瀏覽器了點(diǎn)擊下載firefox    
  
  
  
  
   
  
  
  
  

   
  
  
  
  
圖像的反轉(zhuǎn)   
  
  
  
  

   
  
  
  
  
    
  
  
  
  
    
  
  
  
  
     
  
  
  
  
   
  
  
  
  
      
  
  
  
  
   
  
  
  
  
      
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
canvas
     
  
  
  
  
是時(shí)候更換瀏覽器了點(diǎn)擊下載firefox    
  
  
  
  
   
  
  
  
  

   
  
  
  
  
圖像的反轉(zhuǎn)   
  
  
  
  

   
  
  
  
  
    
  
  
  
  
    
  
  
  
  
     
  
  
  
  
   
  
  
  
  
      
  
  
  
  
   
  
  
  
  
      
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
canvas
     
  
  
  
  
是時(shí)候更換瀏覽器了點(diǎn)擊下載firefox    
  
  
  
  
   
  
  
  
  

   
  
  
  
  
圖像的反轉(zhuǎn)   
  
  
  
  

   
  
  
  
  
    
  
  
  
  
    
  
  
  
  
     
  
  
  
  
   
 
 
 

1)html5 的canvas調(diào)用

 
 
 
 
  
  
  
  
var canvas1=document.getElementById('canvas1');//獲取canvas元素   
  
  
  
  
var context1=canvas.getContext('2d');//此時(shí)獲取到canvas圖像上下文   
  
  
  
  
 
 
 
 

2)創(chuàng)建圖像并繪制原始圖像

 
 
 
 
  
  
  
  
image=new Image();//創(chuàng)建image對(duì)象   
  
  
  
  
image.src="z.JPG";//image的地址   
  
  
  
  
image.onload=function(){   
  
  
  
  
context1.drawImage(image,0,0);//繪制原始圖像，（0,0）表示圖像的左上角位與canvas畫布的位置   
  
  
  
  
}   
  
  
  
  
 
 
 
 

3)獲取圖像的rgba矩陣并操作

 
 
 
 
  
  
  
  
var imagedata=context1.getImageData(0,0,image.width,image.height);   
  
  
  
  
//getImageData(x1,y1,x2,y2)獲取圖像的rgba矩陣，其中截取圖像的大小為(x1,y1)-(x2,y2) 的矩陣   
  
  
  
  
var imagedata1=context2.createImageData(image.width,image.height);   
  
  
  
  
//createImageData(x,y):創(chuàng)建寬高分別為x,y的圖像矩陣   
  
  
  
  
   for(var j=0;j  
  
  
  
    for(var i=0;i  
  
  
  
              k=4*(image.width*j+i);   
  
  
  
  
          imagedata1.data[k+0]=255-imagedata.data[k+0];   
  
  
  
  
          imagedata1.data[k+1]=255-imagedata.data[k+1];   
  
  
  
  
          imagedata1.data[k+2]=255-imagedata.data[k+2];   
  
  
  
  
                  imagedata1.data[k+3]=255;   
  
  
  
  
        }   
  
  
  
  
    context2.putImageData(imagedata1,0,0);   
  
  
  
  
//putImageData(image,0,0):將image矩陣的添加為context 原矩陣的一部分，起點(diǎn)為(0,0)   
  
  
  
  
} 
 
 
 

下面就細(xì)說(shuō)下html5圖像的儲(chǔ)存形式：

矩陣中每個(gè)像素點(diǎn)有四個(gè)通道分別儲(chǔ)存r/g/b/a的值。（四個(gè)值按序連續(xù)的排列，為一維矩陣）

所以每?jī)蓚€(gè)像素間相隔4位，計(jì)算時(shí)

 
 
 
 
  
  
  
  
k=4*(image.width*j+i);為像素點(diǎn)（i,j）的位置，  
 
 
 

 

  
 
 
 
   
  
  
  
imagedata1.data[k+0]表示R分量，依次類推，其中剩下的分別為G、B分量還有透明度。  
  
 
 

這樣上面的程序就實(shí)現(xiàn)了簡(jiǎn)單的圖像的反轉(zhuǎn)功能。
效果如下:

另外需要注意的是，getImageData()函數(shù)可能會(huì)涉及到跨域的problem，所以建議配置apache環(huán)境并將該html放置到其根目錄下進(jìn)行操作。

文章標(biāo)題：HTML 5 canvas 圖像處理
文章位置：http://m.fisionsoft.com.cn/article/djccidc.html