卷積什么是卷積?
就跳過一些用專業(yè)屬于描述專業(yè)術(shù)語看完懵逼的解釋了,
語文成績(jī)很差的我嘗試從字面解釋什么是卷積...
卷,理解成一種壓縮;積,乘積,積累;
卷積需要一個(gè)卷積核,通常是3x3或5x5的方陣,
例如這樣
// 一個(gè)3x3卷積核
0 0 0
0 1 0
0 0 0
我們要怎么用卷積核處理數(shù)據(jù)呢?
下面是一個(gè)例子:
// 下面是一堆排成方陣的數(shù)據(jù)
// 這是我們的數(shù)據(jù)源
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
我們將要用卷積核“掃描并處理”每一個(gè)數(shù)據(jù),
例如要處理第二行第二列的5
1 3 5 0 0 0
4 5 6 * 0 1 0
4 5 6 0 0 0
我們把5
周圍的數(shù)字抽出來,然后把兩個(gè)方陣位置相同的數(shù)字相乘然后相加,
得出5
,這是當(dāng)然的,因?yàn)檫@個(gè)卷積核做的就是輸出原數(shù)據(jù)😂
-1 -1 -1
-1 8 -1
-1 -1 -1
同樣的原理,試試另一個(gè)不同的卷積核
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
的位置,就是這樣“掃描并處理”每一個(gè)數(shù)據(jù)
邊緣怎么辦?
突然的深度拓展
卷積在深度學(xué)習(xí)中十分重要,下面是一個(gè)可視化CNN(卷積神經(jīng)網(wǎng)絡(luò))的卷積過程
http://scs.ryerson.ca/~aharley/vis/conv/
canvas
<canvas>是一個(gè)可以使用腳本(通常為JavaScript)來繪制圖形的 HTML 元素.它可以用于繪制圖表、制作圖片構(gòu)圖或者制作簡(jiǎn)單的(以及不那么簡(jiǎn)單的)動(dòng)畫。
canvas 繪制圖片
ctx.drawImage(image, x, y)
canvas 轉(zhuǎn)換為 ImageData
ctx.getImageData(sx, sy, sw, sh); // 返回 ImageData
ImageData 數(shù)據(jù)是 Uint8ClampedArray
,它描述了一個(gè)一維數(shù)組,包含以 RGBA 順序的數(shù)據(jù),數(shù)據(jù)使用 0 至 255(包含)的整數(shù)表示。
所以每一個(gè)點(diǎn)都會(huì)表示為:
// 這樣僅僅是一個(gè)像素點(diǎn)的數(shù)據(jù)
R G B A
255 255 0 255
卷積 + ImageData = ?
圖像歸根到底就是一大堆的顏色點(diǎn)矩陣,我們完全可以把顏色點(diǎn)代替上面的數(shù)字矩陣處理,不同的卷積核對(duì)圖片的處理結(jié)果如下(圖片來自維基百科)
卷積就是如此神奇😂
在 canvas 中實(shí)現(xiàn)卷積處理
以下是一個(gè) JavaScript 對(duì) canvas 輸出的 ImageData 進(jìn)行卷積的實(shí)例:
/* * 參數(shù)中的 kernel 就是卷積核方陣,不過順著排列成了一個(gè)九位的數(shù)組 * 像是這樣 [-1, -1, -1, -1, 8, -1, -1, -1, -1] * offset 對(duì)RGBA數(shù)值直接增加,表現(xiàn)為提高亮度 * 下面的for循環(huán) * 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
測(cè)試網(wǎng)址,附帶彩蛋嘻嘻嘻😘https://ssshooter.github.io/canvas-img-process/
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
標(biāo)簽:文山 蘇州 甘南 萍鄉(xiāng) 惠州 營(yíng)口 咸陽 紅河
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《在HTML5 canvas里用卷積核進(jìn)行圖像處理的方法》,本文關(guān)鍵詞 在,HTML5,canvas,里用卷,積核,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。