DDR爱好者之家

在HTML5 canvas里用卷积核进行图像处理的方法
站长资源 2024/11/24 佚名
32 1538
DDR爱好者之家 Design By 杰米

卷积什么是卷积？

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

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

卷，理解成一种压缩；积，乘积，积累；

卷积需要一个卷积核，通常是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/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米