在HTML5 canvas里用卷积核进行图像处理的方法
|
就跳过一些用专业属于描写专业术语看完懵逼的表明白， 语文后果很差的我实行从字面表明什么是卷积... 卷，领略成一种压缩；积，乘积，蕴蓄； 卷积必要一个卷积核，凡是是3x3或5x5的方阵， 譬喻这样 // 一个3x3卷积核 我们要怎么用卷积核处理赏罚数据呢？ 下面是一个例子： // 下面是一堆排成方阵的数据 我们将要用卷积核“扫描并处理赏罚”每一个数据， 譬喻要处理赏罚第二行第二列的5 1 3 5 0 0 0 我们把5周围的数字抽出来，然后把两个方阵位置沟通的数字相乘然后相加， 得出5，这是虽然的，由于这个卷积核做的就是输出原数据😂 -1 -1 -1 同样的道理，试试另一个差异的卷积核 1 3 5 -1 -1 -1 我们获得的是 1*-1 + 3*-1 + 5*-1 然后用得出来的6放入原本5的位置，就是这样“扫描并处理赏罚”每一个数据 边沿怎么办？ 常数添补 复制边沿像素 溘然的深度拓展 卷积在深度进修中异常重要，下面是一个可视化CNN(卷积神经收集)的卷积进程 canvas <canvas>是一个可以行使剧本(凡是为JavaScript)来绘制图形的 HTML 元素.它可以用于绘制图表、建造图片构图可能建造简朴的(以及不那么简朴的)动画。canvas 绘制图片 ctx.drawImage(image, x, y) canvas 转换为 ImageData ctx.getImageData(sx, sy, sw, sh); // 返回 ImageData ImageData 数据是 Uint8ClampedArray ，它描写了一个一维数组，包括以 RGBA 次序的数据，数据行使 0 至 255（包括）的整数暗示。 以是每一个点城市暗示为： // 这样仅仅是一个像素点的数据 卷积 + ImageData = ？ 图像归根到底就是一大堆的颜色点矩阵，我们完全可以把颜色点取代上面的数字矩阵处理赏罚，差异的卷积查对图片的处理赏罚功效如下（图片来自维基百科） 卷积就是云云神奇😂 在 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/ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
