HTML 5中怎么利用canvas对图像进行处理

发布时间：2021-07-22 14:13:15 作者：Leah
来源：亿速云阅读：158

这篇文章将为大家详细讲解有关HTML 5中怎么利用canvas对图像进行处理，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

下面就介绍一个简单的例子:

<!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()">图像的反转</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()">图像的反转</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()">图像的反转</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调用

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

2)创建图像并绘制原始图像

image=new Image();//创建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):创建宽高分别为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)   }

下面就细说下html5图像的储存形式：

HTML 5中怎么利用canvas对图像进行处理

矩阵中每个像素点有四个通道分别储存r/g/b/a的值。（四个值按序连续的排列，为一维矩阵）

所以每两个像素间相隔4位，计算时

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

imagedata1.data[k+0]表示R分量，依次类推，其中剩下的分别为G、B分量还有透明度。

关于HTML 5中怎么利用canvas对图像进行处理就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

HTML 5中怎么利用canvas对图像进行处理

相关阅读