HTML 5中怎么利用canvas對圖像進(jìn)行處理

發(fā)布時間：2021-07-22 14:13:15 來源：億速云閱讀：146 作者：Leah 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)HTML 5中怎么利用canvas對圖像進(jìn)行處理，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

下面就介紹一個簡單的例子:

<!DOCTYPE html>      <html>   <head>      <title>canvas圖像處理</title>     </head>     <body>     <h2>canvas</h2>     <canvas id="canvas1" width="200" height="150">是時候更換瀏覽器了<a href="http://firefox.com.cn/download/">點擊下載firefox</a></canvas>    <script>       var canvas1=document.getElementById('canvas1');       var context1=canvas1.getContext('2d');       image=new Image();       image.src="z.JPG";       image.onload=function(){       context1.drawImage(image,0,0);//繪制原始圖像，（0,0）表示圖像的左上角位與canvas畫布的位置       }   </script>   <br/>   <button onclick="draw()">圖像的反轉(zhuǎn)</button>   <br/>   <canvas id="canvas2" width="200" height="150"></canvas>    <script>       function draw(){           var canvas2=document.getElementById('canvas2');           var context2=canvas2.getContext('2d');               var imagedata=context1.getImageData(0,0,image.width,image.height);               var imagedata1=context2.createImageData(image.width,image.height);               for(var j=0;j<image.height;j+=1)               for(var i=0;i<image.width;i+=1){                 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);       }   </script>    </body>     </html>   <!DOCTYPE html>      <html>   <head>      <title>canvas圖像處理</title>     </head>     <body>     <h2>canvas</h2>     <canvas id="canvas1" width="200" height="150">是時候更換瀏覽器了<a href="http://firefox.com.cn/download/">點擊下載firefox</a></canvas>    <script>       var canvas1=document.getElementById('canvas1');       var context1=canvas1.getContext('2d');       image=new Image();       image.src="z.JPG";       image.onload=function(){       context1.drawImage(image,0,0);//繪制原始圖像，（0,0）表示圖像的左上角位與canvas畫布的位置       }   </script>   <br/>   <button onclick="draw()">圖像的反轉(zhuǎn)</button>   <br/>   <canvas id="canvas2" width="200" height="150"></canvas>    <script>       function draw(){           var canvas2=document.getElementById('canvas2');           var context2=canvas2.getContext('2d');               var imagedata=context1.getImageData(0,0,image.width,image.height);               var imagedata1=context2.createImageData(image.width,image.height);               for(var j=0;j<image.height;j+=1)               for(var i=0;i<image.width;i+=1){                 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);       }   </script>    </body>     </html>   <!DOCTYPE html>      <html>   <head>      <title>canvas圖像處理</title>     </head>     <body>     <h2>canvas</h2>     <canvas id="canvas1" width="200" height="150">是時候更換瀏覽器了<a href="http://firefox.com.cn/download/">點擊下載firefox</a></canvas>    <script>       var canvas1=document.getElementById('canvas1');       var context1=canvas1.getContext('2d');       image=new Image();       image.src="z.JPG";       image.onload=function(){       context1.drawImage(image,0,0);//繪制原始圖像，（0,0）表示圖像的左上角位與canvas畫布的位置       }   </script>   <br/>   <button onclick="draw()">圖像的反轉(zhuǎn)</button>   <br/>   <canvas id="canvas2" width="200" height="150"></canvas>    <script>       function draw(){           var canvas2=document.getElementById('canvas2');           var context2=canvas2.getContext('2d');               var imagedata=context1.getImageData(0,0,image.width,image.height);               var imagedata1=context2.createImageData(image.width,image.height);               for(var j=0;j<image.height;j+=1)               for(var i=0;i<image.width;i+=1){                 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);       }   </script>    </body>     </html>

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

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

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

image=new Image();//創(chuàng)建image對象   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<image.height;j+=1)       for(var i=0;i<image.width;i+=1){                 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 原矩陣的一部分，起點為(0,0)   }

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

HTML 5中怎么利用canvas對圖像進(jìn)行處理

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

所以每兩個像素間相隔4位，計算時

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

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

關(guān)于HTML 5中怎么利用canvas對圖像進(jìn)行處理就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

HTML 5中怎么利用canvas對圖像進(jìn)行處理

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽