html5 canvas 图像处理
2012-07-20 09:29
543 查看
与matlab处理图像类似的是,这里也是采用图像矩阵的形式。
下面就介绍一个简单的例子:
双击代码全选
1)html5 的canvas调用
双击代码全选
2)创建图像并绘制原始图像
3)获取图像的rgba矩阵并操作
下面就细说下html5图像的储存形式:
矩阵中每个像素点有四个通道分别储存r/g/b/a的值。(四个值按序连续的排列,为一维矩阵)
所以每两个像素间相隔4位,计算时
k=4*(image.width*j+i);为像素点(i,j)的位置, imagedata1.data[k+0]表示R分量,依次类推,其中剩下的分别为G、B分量还有透明度。
这样上面的程序就实现了简单的图像的反转功能。
另外需要注意的是,getImageData()函数可能会涉及到跨域的problem,所以建议配置apache环境并将该html放置到其根目录下进行操作。
本文出自http://www.html5china.com/HTML5features/canvas/20120604_3752.html
下面就介绍一个简单的例子:
<!DOCTYPE html> <html> <head> <title>canvas图像处理</title> </head> <body> <h1>canvas</h1> <canvas id="canvas1" width="200" height="150">是时候更换浏览器了<ahref="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 2 | var canvas1=document.getElementById('canvas1');//获取canvas元素 var context1=canvas.getContext('2d');//此时获取到canvas图像上下文 |
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图像的储存形式:
矩阵中每个像素点有四个通道分别储存r/g/b/a的值。(四个值按序连续的排列,为一维矩阵)
所以每两个像素间相隔4位,计算时
k=4*(image.width*j+i);为像素点(i,j)的位置, imagedata1.data[k+0]表示R分量,依次类推,其中剩下的分别为G、B分量还有透明度。
这样上面的程序就实现了简单的图像的反转功能。
另外需要注意的是,getImageData()函数可能会涉及到跨域的problem,所以建议配置apache环境并将该html放置到其根目录下进行操作。
本文出自http://www.html5china.com/HTML5features/canvas/20120604_3752.html
相关文章推荐
- HTML5 Canvas(画布)图像处理
- HTML5标签canvas图像处理
- Html5之高级-6 HTML5 Canvas绘图(Canvas概述、Canvas绘图、处理 Canvas 中的图像)
- html5 canvas 图像处理
- HTML5之Canvas绘图——图像处理教程
- html5 canvas 图像处理
- html5学习canvas图像处理
- html5 canvas 标签绘制图像且渐变色处理
- HTML5标签canvas图像处理
- 基于HTML5的轻量级图像处理引擎Demo_update1
- 腾讯开源:基于HTML5的图像处理引擎――AlloyImage(简称AI)
- 腾讯推出HTML5开源专业在线图像处理引擎
- 基于HTML5的PACS HTML5图像处理(7)实现客户端JS调整窗宽窗位
- HTML5 Canvas图像放大、移动实例1
- [HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用
- HTML5 Canvas 图像动画的实现(实例小球弹跳)
- html5 canvas图像-图像的缩放
- HTML5灰度图像处理练习3:图像数据传输
- 图像像素处理_明度/亮度/平均值/灰褐色/滤镜/灰色_canvas_js动画
- 基于canvas图像处理的图片展示demo