html5 canvas 图像处理

标签： HTML5 技术博文 HTML5学习资源 | 发表时间：2012-06-03 20:26 | 作者：HTML5研究小组
出处：http://www.mhtml5.com

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

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

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

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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)

   }

下面就细说下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.cnblogs.com/blue-lg/archive/2011/12/23/2299019.html

 

相关 [html5 canvas 图像处理] 推荐：

html5 canvas 图像处理

- - HTML5研究小组
前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理，在此稍稍交代一下. 与matlab处理图像类似的是，这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. context1.drawImage(image,0,0);//绘制原始图像，（0,0）表示图像的左上角位与canvas画布的位置.

HTML5 Canvas(画布)教程 – 图像处理

- - Web前端 - ITeye博客
Canvas标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中. 在此之前，人们要想实现动态的网页应用，只能借助于第三方的 插件，比如Flash或Java，而引入了Canvas标记后，人们直接打通了通往神奇的动态应用网页的大门. 本教程内容只覆盖了一小部分、但却是非常重 要的canvas标记的应用功能——图像显示和处理.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.

备份：html5 canvas cheat sheet

- - 膘叔
纯备份资料,HTML5的canvas资料.

HTML5 Canvas双缓存实例

- - Web前端 - ITeye博客
转自：http://www.108js.com/article/article3/30046.html?id=255. 下面是用HTML5的标签写的一个视差滚动动画的示例. 采用了制作动画或者游戏编程中常用的双缓冲技术：获取到页面中的Canvas对象之后，创建了一个与页面Canvas同样大小的Canvas对象.

HTML5 Canvas: 测试浏览器是否支持Canvas

- - CSDN博客Web前端推荐文章
本文翻译自Steve Fulton & Jeff Fulton. 在获取HTML页面上Canvas元素的引用后，我们需要测试一下该元素是否包含“上下文”(context). Canvas的上下文指的是由浏览器定义的用于绘画的平面. 简单地说，如果上下文不存在的话，Canvas也就名存实亡了. 测试浏览器是否支持Canvas有好几种方法.

在HTML 5 的 Canvas 中应用卷积矩阵对图像处理

- BeerBubble - 走走停停看看
HTML 5中的 canvas 元素是相当强大的，利用他的 getImageData 方法可以对载入的图像直接进行位图操作. 但是直接对位图进行操作比较麻烦，如果利用卷积矩阵这个工具的话，可以通过几个简单的参数实现复杂的效果. 所谓的矩阵的卷积，就是如下图显示的那样，当计算红色框中的数值的时候，分别先提取周围绿框中8个数字，然后与施加的那个矩阵中对应位置相乘，然后把各个乘积加在一起，就得到了最终的值了.

HTML5 Canvas开发框架：CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制，你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

25 超棒的 HTML5 Canvas 游戏

- 迎客松 - LinuxEden开源社区-Linux伊甸园
Canvas 元素作为HTML5标准的一部分，允许你通过脚本动态渲染点阵图像. 这是为了基于浏览器的矢量图形而设计. HTML Canvas 把一个绘图 API 展现给 JS 客户端，使得脚本能够把想绘制的东西都绘制到一块画布上. 阅读全文 | 邮件推荐 | 评论回复.

html5 canvas 详细使用教程

- - CSDN博客Web前端推荐文章
图形变形（平移、旋转、缩放）. 矩阵变换（图形变形的机制）. 绘制图像（图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]）. 保存和恢复状态（context）. 结合setInterval制作动画.      是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 ，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验.