前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理,在此稍稍交代一下。
与matlab处理图像类似的是,这里也是采用图像矩阵的形式。
下面就介绍一个简单的例子:
canvas图像处理 canvas
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下面就细说下html5图像的储存形式:
Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8下载Modoer 是一款以本地分享,多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计,开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱,不局限于商铺类点评,真正实现了多类型的点评,可以让您的网站点评任何事与物,同时增加产品模块,也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
矩阵中每个像素点有四个通道分别储存r/g/b/a的值。(四个值按序连续的排列,为一维矩阵)
所以每两个像素间相隔4位,计算时
k=4*(image.width*j+i);为像素点(i,j)的位置,imagedata1.data[k+0]表示R分量,依次类推,其中剩下的分别为G、B分量还有透明度。这样上面的程序就实现了简单的图像的反转功能。
效果如下:
另外需要注意的是,getImageData()函数可能会涉及到跨域的problem,所以建议配置apache环境并将该html放置到其根目录下进行操作。













