在HTML5 canvas里用卷积核进行图像处理的方法


Posted in HTML / CSS onMay 02, 2018

卷积什么是卷积?

就跳过一些用专业属于描述专业术语看完懵逼的解释了,

语文成绩很差的我尝试从字面解释什么是卷积...

卷,理解成一种压缩;积,乘积,积累;

卷积需要一个卷积核,通常是3x3或5x5的方阵,

例如这样

// 一个3x3卷积核
0 0 0
0 1 0
0 0 0

我们要怎么用卷积核处理数据呢?

下面是一个例子:

// 下面是一堆排成方阵的数据
// 这是我们的数据源
1 3 5 1 3 5 1 3 5
4 5 6 1 3 5 1 3 5
4 5 6 1 3 5 1 3 5
4 5 6 1 3 5 1 3 5

我们将要用卷积核“扫描并处理”每一个数据,

例如要处理第二行第二列的5

1 3 5    0 0 0
4 5 6 * 0 1 0
4 5 6    0 0 0

我们把5周围的数字抽出来,然后把两个方阵位置相同的数字相乘然后相加,

得出5,这是当然的,因为这个卷积核做的就是输出原数据?

-1 -1 -1
-1  8 -1
-1 -1 -1

同样的原理,试试另一个不同的卷积核

1 3 5    -1 -1 -1
4 5 6 * -1 8 -1
4 5 6    -1 -1 -1

我们得到的是

1*-1 + 3*-1 + 5*-1
+ 4*-1 + 5*8 + 6*-1
+ 4*-1 + 5*-1 + 6*-1
= 6

然后用得出来的6放入原来5的位置,就是这样“扫描并处理”每一个数据

边缘怎么办?

  1. 常数填充
  2. 复制边缘像素

突然的深度拓展

卷积在深度学习中十分重要,下面是一个可视化CNN(卷积神经网络)的卷积过程
http://scs.ryerson.ca/~aharley/vis/conv/

canvas

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画。

canvas 绘制图片

ctx.drawImage(image, x, y)

在HTML5 canvas里用卷积核进行图像处理的方法

canvas 转换为 ImageData

ctx.getImageData(sx, sy, sw, sh);
// 返回 ImageData

ImageData 数据是 Uint8ClampedArray ,它描述了一个一维数组,包含以 RGBA 顺序的数据,数据使用 0 至 255(包含)的整数表示。

所以每一个点都会表示为:

// 这样仅仅是一个像素点的数据
R G B A
255 255 0 255

卷积 + ImageData = ?

图像归根到底就是一大堆的颜色点矩阵,我们完全可以把颜色点代替上面的数字矩阵处理,不同的卷积核对图片的处理结果如下(图片来自维基百科)

在HTML5 canvas里用卷积核进行图像处理的方法

卷积就是如此神奇?

在 canvas 中实现卷积处理

以下是一个 JavaScript 对 canvas 输出的 ImageData 进行卷积的实例:

/* 
 * 参数中的 kernel 就是卷积核方阵,不过顺着排列成了一个九位的数组
 * 像是这样 [-1, -1, -1, -1, 8, -1, -1, -1, -1]
 * offset 对RGBA数值直接增加,表现为提高亮度
 * 下面的for循环
 * y 代表行,x 代表列,c 代表RGBA
 */
convolutionMatrix(input, kernel, offset = 0) {
  let ctx = this.outputCtx
  let output = ctx.createImageData(input)
  let w = input.width,
    h = input.height
  let iD = input.data,
    oD = output.data
  for (let y = 1; y < h - 1; y += 1) {
    for (let x = 1; x < w - 1; x += 1) {
      for (let c = 0; c < 3; c += 1) {
        let i = (y * w + x) * 4 + c
        oD[i] =
          offset +
          (kernel[0] * iD[i - w * 4 - 4] +
            kernel[1] * iD[i - w * 4] +
            kernel[2] * iD[i - w * 4 + 4] +
            kernel[3] * iD[i - 4] +
            kernel[4] * iD[i] +
            kernel[5] * iD[i + 4] +
            kernel[6] * iD[i + w * 4 - 4] +
            kernel[7] * iD[i + w * 4] +
            kernel[8] * iD[i + w * 4 + 4]) /
            this.divisor
      }
      oD[(y * w + x) * 4 + 3] = 255
    }
  }
  ctx.putImageData(output, 0, 0)
}

成品代码:https://github.com/ssshooter/canvas-img-process

测试网址,附带彩蛋嘻嘻嘻?https://ssshooter.github.io/canvas-img-process/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 #HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 #HTML / CSS
html5调用摄像头功能的实现代码
May 07 #HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 #HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 #HTML / CSS
HTML5 device access 设备访问详解
May 24 #HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 #HTML / CSS
You might like
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
Python多线程原理与用法详解
2018/08/20 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python写一个随机点名软件的实例
2019/11/28 Python
python实现批量命名照片
2020/06/18 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
金蝶的一道SQL笔试题
2012/12/18 面试题
开工仪式主持词
2014/03/20 职场文书
银行服务理念口号
2015/12/25 职场文书
教师读书活动心得体会
2016/01/14 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript