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

标签: HTML JavaScript | 发表时间:2011-08-25 03:30 | 作者:Shawphy BeerBubble
出处:http://shawphy.com

HTML 5中的 canvas 元素是相当强大的,利用他的 getImageData 方法可以对载入的图像直接进行位图操作。但是直接对位图进行操作比较麻烦,如果利用卷积矩阵这个工具的话,可以通过几个简单的参数实现复杂的效果。

所谓的矩阵的卷积,就是如下图显示的那样,当计算红色框中的数值的时候,分别先提取周围绿框中8个数字,然后与施加的那个矩阵中对应位置相乘,然后把各个乘积加在一起,就得到了最终的值了。

卷积矩阵的运算

比如上图中的42是这么来的:

  (40*0)+(42*1)+(46*0)
+ (46*0)+(50*0)+(55*0)
+ (52*0)+(56*0)+(58*0)
= 42

这就是卷积了。然后,所谓的对图像的卷积操作,就是指对图像上的每一点的像素值,用这个矩阵进行运算,得到一个新的值。

比如下面这张图
卷积矩阵原图
利用下面这个矩阵
-6 -3 0
-3 -1 3
0 3 6
就立刻能够得到浮雕效果。

卷积矩阵浮雕效果

然后为了使用更方便,通常还会给最终值除以一个系数以及加上一个偏移。
比如下面这个矩阵。
0 0 0
0 1 0
0 0 0
这个矩阵(实际上这个矩阵本身不对图像进行任何操作),然后设置系数为-1,偏移为255的话,就能实现反色效果了,真是相当的神奇。
卷积矩阵反色效果

为了简化操作,我写了个简单的函数来对图像数据进行操作。
函数第一个参数是 canvas上的 imageData 对象
第二个参数是传入矩阵所对应的数组,如果是下面这样的矩阵
a b c
d e f
g h i
则传入第二个的参数应为 [a,b,c,d,e,f,g,h,i]
第三个参数是除数因子。
第四个参数就是偏移量。

  1. // 计算卷积矩阵的函数
  2. function ConvolutionMatrix(input, matrix, divisor, offset){
  3.     // 创建一个输出的 imageData 对象
  4.     var output = document.createElement("canvas")
  5.                          .getContext('2d').createImageData(input);
  6.  
  7.     var w = input.width, h = input.height;
  8.     var iD = input.data, oD = output.data;
  9.     var m = matrix;
  10.  
  11.     // 对除了边缘的点之外的内部点的 RGB 进行操作,透明度在最后都设为 255
  12.     for (var y = 1; y < h-1; y += 1) {
  13.         for (var x = 1; x < w-1; x += 1) {
  14.             for (var c = 0; c < 3; c += 1) {
  15.                 var i = (y*w + x)*4 + c;
  16.                 oD[i] = offset
  17.                     +(m[0]*iD[i-w*4-4] + m[1]*iD[i-w*4] + m[2]*iD[i-w*4+4]
  18.                     + m[3]*iD[i-4]     + m[4]*iD[i]     + m[5]*iD[i+4]
  19.                     + m[6]*iD[i+w*4-4] + m[7]*iD[i+w*4] + m[8]*iD[i+w*4+4])
  20.                     / divisor;
  21.             }
  22.             oD[(y*w + x)*4 + 3] = 255; // 设置透明度
  23.         }
  24.     }
  25.     return output;
  26. }

我这里只写了个3阶的卷积矩阵。如果觉得不够high还可以自己实现一个5阶的。
gimp自带卷积矩阵的滤镜,photoshop里我没找到。
关于gimp的卷积矩阵滤镜可以参考: http://docs.gimp.org/en/plug-in-convmatrix.html

我写的更多效果直接查看: http://shawphy.github.com/share/2011/matrix.html

关于 canvas 的资料可以查看 https://developer.mozilla.org/cn/Canvas_tutorial

相关 [html canvas 应用] 推荐:

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

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

原生应用 vs HTML 5

- - keakon的涂鸦馆
这几个月都在开发 知乎日报的后端,让我对移动应用的开发有了更多的认识. 简单来说,我以前一直都认为原生应用才是王道,现在则觉得 HTML 5 才是未来. 不可否认的是,原生应用更快,能使用更完整的 API,但它有个致命的缺点——升级太麻烦. 举例来说,我们筛选出下个版本需要实现的功能,很快就能做出其中的一部分让内测人员体验.

HTML语义化的应用

- - 标点符
HTML语义化就是根据具体内容,选择合适的HTML标签进行代码的编写. 用合理HTML标记以及其特有的属性去格式化文档内容. 便于开发者阅读和写出更优雅的代码,同时让搜索引擎的爬虫能更好的识别. 相比先前网页开发过程中仅关注布局和功能,在开发过程中使用表格布局或DIV+CSS布局,越来越多的人关注HTML语义化,核心是语义化可以带来显而易见的好处:.

走进 HTML5:20个惊艳的 HTML5 Canvas 应用试验

- - 博客园_梦想天空
如今,HTML5 可谓如众星捧月一般,受到众多业内巨头的青睐. 很多 Web 开发者也尝试着用. HTML5 来制作各种 Web 应用. HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过. JavaScript 绘制图形的方法,非常强大.

9款基于HTML5/SVG/Canvas的折线图表应用

- - HTML5资源教程
利用 HTML5制作精美而实用的折线图表比较简单,因为我们除了可以利用HTML/CSS/Javascript外,还可以使用功能强大的SVG和Canvas动画特性,今天我们就来分享9款基于HTML5/SVG/Canvas的折线图表应用. 1、HTML5折线图表Aristochart 图表配置简单. 之前我已经向大家分享了几款HTML5图表应用, HTML5 Canvas图表应用RGraph、 HTML5 Canvas饼状图表.

【转载】互动中国分享: 20个惊艳的 HTML5 Canvas 应用试验

- - HTML5研究小组
如今,HTML5 可谓如众星捧月一般,受到众多业内巨头的青睐. 很多 Web 开发者也尝试着用 HTML5 来制作各种 Web 应用. HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.

html5 canvas入门

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

HTML 5应用开发商Sencha融资1500万美元,基于HTML 5的云服务应用Sencha.io进入公测阶段

- blueslan - 36氪
HTML 5应用开发商刚刚宣布,公司的基于HTML 5的云服务应用Sencha.io已经进入公测阶段. 这个云服务应用包括4部分,Sencha.io Data、Sencha.io Messages、Sencha.io Login和Sencha.io Development,有了这个服务,应用开发者只需几行Javascript代码就可以实现云储存数据、发送消息、收听留言和部署应用程序功能.

Opera TV Store正式开放,从此HTML 5 Web应用无处不在

- - 雷锋网
在2011IFA大会上,雷锋网之前介绍过的 Opera展示了 Opera TV Store,本周在 CES上,公司宣布TV Store正式对外开放. Opera TV Store的建立就是为了以一种直观的,屏幕友好的方式让用户享受Web内容及应用,在当中你可以同时打开好几个应用,并将之最小化,就算进行应用外的操作,也能收到应用内消息提醒等.

html5 canvas 图像处理

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