自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML 5 canvas 圖像處理

作者：blue_lg
開發(fā) 前端
前兩天無意中看了下《pro html5 programming》,發(fā)現(xiàn)html5竟然也能很好的支持圖像處理，在此稍稍交代一下。與matlab處理圖像類似的是，這里也是采用圖像矩陣的形式。

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

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

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

  1. <!DOCTYPE html>      
  2. <html>   
  3. <head>      
  4. <title>canvas圖像處理</title>     
  5. </head>     
  6. <body>     
  7. <h1>canvas</h1>     
  8. <canvas id="canvas1" width="200" height="150">是時(shí)候更換瀏覽器了<a href="http://firefox.com.cn/download/">點(diǎn)擊下載firefox</a></canvas>    
  9. <script>   
  10.     var canvas1=document.getElementById('canvas1');   
  11.     var context1=canvas1.getContext('2d');   
  12.     image=new Image();   
  13.     image.src="z.JPG";   
  14.     image.onload=function(){   
  15.     context1.drawImage(image,0,0);//繪制原始圖像，（0,0）表示圖像的左上角位與canvas畫布的位置   
  16.     }   
  17. </script>   
  18. <br/>   
  19. <button onclick="draw()">圖像的反轉(zhuǎn)</button>   
  20. <br/>   
  21. <canvas id="canvas2" width="200" height="150"></canvas>    
  22. <script>   
  23.     function draw(){   
  24.         var canvas2=document.getElementById('canvas2');   
  25.         var context2=canvas2.getContext('2d');   
  26.             var imagedata=context1.getImageData(0,0,image.width,image.height);   
  27.             var imagedata1=context2.createImageData(image.width,image.height);   
  28.             for(var j=0;j<image.height;j+=1)   
  29.             for(var i=0;i<image.width;i+=1){   
  30.               k=4*(image.width*j+i);   
  31.               imagedata1.data[k+0]=255-imagedata.data[k+0];   
  32.               imagedata1.data[k+1]=255-imagedata.data[k+1];   
  33.               imagedata1.data[k+2]=255-imagedata.data[k+2];   
  34.               imagedata1.data[k+3]=255;   
  35.             }   
  36.             context2.putImageData(imagedata1,0,0);   
  37.     }   
  38. </script>    
  39. </body>     
  40. </html>   
  41. <!DOCTYPE html>      
  42. <html>   
  43. <head>      
  44. <title>canvas圖像處理</title>     
  45. </head>     
  46. <body>     
  47. <h1>canvas</h1>     
  48. <canvas id="canvas1" width="200" height="150">是時(shí)候更換瀏覽器了<a href="http://firefox.com.cn/download/">點(diǎn)擊下載firefox</a></canvas>    
  49. <script>   
  50.     var canvas1=document.getElementById('canvas1');   
  51.     var context1=canvas1.getContext('2d');   
  52.     image=new Image();   
  53.     image.src="z.JPG";   
  54.     image.onload=function(){   
  55.     context1.drawImage(image,0,0);//繪制原始圖像，（0,0）表示圖像的左上角位與canvas畫布的位置   
  56.     }   
  57. </script>   
  58. <br/>   
  59. <button onclick="draw()">圖像的反轉(zhuǎn)</button>   
  60. <br/>   
  61. <canvas id="canvas2" width="200" height="150"></canvas>    
  62. <script>   
  63.     function draw(){   
  64.         var canvas2=document.getElementById('canvas2');   
  65.         var context2=canvas2.getContext('2d');   
  66.             var imagedata=context1.getImageData(0,0,image.width,image.height);   
  67.             var imagedata1=context2.createImageData(image.width,image.height);   
  68.             for(var j=0;j<image.height;j+=1)   
  69.             for(var i=0;i<image.width;i+=1){   
  70.               k=4*(image.width*j+i);   
  71.               imagedata1.data[k+0]=255-imagedata.data[k+0];   
  72.               imagedata1.data[k+1]=255-imagedata.data[k+1];   
  73.               imagedata1.data[k+2]=255-imagedata.data[k+2];   
  74.               imagedata1.data[k+3]=255;   
  75.             }   
  76.             context2.putImageData(imagedata1,0,0);   
  77.     }   
  78. </script>    
  79. </body>     
  80. </html>   
  81. <!DOCTYPE html>      
  82. <html>   
  83. <head>      
  84. <title>canvas圖像處理</title>     
  85. </head>     
  86. <body>     
  87. <h1>canvas</h1>     
  88. <canvas id="canvas1" width="200" height="150">是時(shí)候更換瀏覽器了<a href="http://firefox.com.cn/download/">點(diǎn)擊下載firefox</a></canvas>    
  89. <script>   
  90.     var canvas1=document.getElementById('canvas1');   
  91.     var context1=canvas1.getContext('2d');   
  92.     image=new Image();   
  93.     image.src="z.JPG";   
  94.     image.onload=function(){   
  95.     context1.drawImage(image,0,0);//繪制原始圖像，（0,0）表示圖像的左上角位與canvas畫布的位置   
  96.     }   
  97. </script>   
  98. <br/>   
  99. <button onclick="draw()">圖像的反轉(zhuǎn)</button>   
  100. <br/>   
  101. <canvas id="canvas2" width="200" height="150"></canvas>    
  102. <script>   
  103.     function draw(){   
  104.         var canvas2=document.getElementById('canvas2');   
  105.         var context2=canvas2.getContext('2d');   
  106.             var imagedata=context1.getImageData(0,0,image.width,image.height);   
  107.             var imagedata1=context2.createImageData(image.width,image.height);   
  108.             for(var j=0;j<image.height;j+=1)   
  109.             for(var i=0;i<image.width;i+=1){   
  110.               k=4*(image.width*j+i);   
  111.               imagedata1.data[k+0]=255-imagedata.data[k+0];   
  112.               imagedata1.data[k+1]=255-imagedata.data[k+1];   
  113.               imagedata1.data[k+2]=255-imagedata.data[k+2];   
  114.               imagedata1.data[k+3]=255;   
  115.             }   
  116.             context2.putImageData(imagedata1,0,0);   
  117.     }   
  118. </script>    
  119. </body>     
  120. </html>   

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

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

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

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

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

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

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

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

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

  1. k=4*(image.width*j+i);為像素點(diǎn)（i,j）的位置，  
 
  1. imagedata1.data[k+0]表示R分量，依次類推，其中剩下的分別為G、B分量還有透明度。  

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

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

原文鏈接：http://www.cnblogs.com/blue-lg/archive/2011/12/23/2299019.html

  1. HTML 5和CSS3快速制作便簽特效
  2. 如何制作HTML 5的iPhone應(yīng)用程序
  3. HTML 5做出讓你意想不到的幾件事
  4. HTML 5多媒體組件（視頻的使用）
  5. 看HTML 5如何創(chuàng)建一個(gè)圖片瀏覽器
責(zé)任編輯：張偉 來源： blue_lg的博客
HTML5
相關(guān)推薦

2011-11-25 14:20:57

HTML 5

2012-06-12 09:53:14

HTML5

2012-09-24 13:49:13

HTML5CanvasJS

2012-07-26 10:40:38

HTML5

2012-05-09 09:41:58

HTML5

2011-11-09 10:05:26

HTML 5

2012-02-22 15:41:50

HTML 5

2012-02-24 15:28:36

ibmdw

2012-05-29 09:57:10

HTML5

2017-07-05 16:22:09

HTML5canvas動(dòng)態(tài)

2012-08-30 10:18:09

HTML5CanvasHTML5實(shí)例

2015-10-08 08:48:44

HTML5canvas動(dòng)畫

2011-07-21 15:34:36

iPhone HTML5 Canvas

2011-07-18 13:35:14

HTML 5

2012-05-09 12:18:14

HTML5Canvas

2016-01-20 10:11:56

華麗CanvasHTML5

2012-04-18 15:36:33

HTML5Canvas交互式

2013-03-06 16:14:16

UCHTML5游戲引擎

2012-02-23 10:32:19

HTML 5

2011-03-02 13:15:26

HTML 5jQuery
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)