html5 canvas图像处理的实现代码分享-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理，在此稍稍交代一下。

与matlab处理图像类似的是，这里也是采用图像矩阵的形式。

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

<!DOCTYPE html>   
<html>
<head>   
<title>canvas图像处理</title>  
</head>  
<body>  
<h1>canvas</h1>  
<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调用

1 2	`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)
}