如何在HTML5 中使用canvas進(jìn)行圖像處理

本篇文章為大家展示了如何在HTML5 中使用canvas進(jìn)行圖像處理，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

卷積什么是卷積？

就跳過(guò)一些用專(zhuān)業(yè)屬于描述專(zhuān)業(yè)術(shù)語(yǔ)看完懵逼的解釋了，

語(yǔ)文成績(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周?chē)臄?shù)字抽出來(lái)，然后把兩個(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

然后用得出來(lái)的6放入原來(lái)5的位置，就是這樣“掃描并處理”每一個(gè)數(shù)據(jù)

邊緣怎么辦？

1. 常數(shù)填充

2. 復(fù)制邊緣像素

突然的深度拓展

卷積在深度學(xué)習(xí)中十分重要，下面是一個(gè)可視化CNN(卷積神經(jīng)網(wǎng)絡(luò))的卷積過(guò)程
http://scs.ryerson.ca/~aharley/vis/conv/

canvas

<canvas>是一個(gè)可以使用腳本(通常為JavaScript)來(lái)繪制圖形的 HTML 元素.它可以用于繪制圖表、制作圖片構(gòu)圖或者制作簡(jiǎn)單的(以及不那么簡(jiǎn)單的)動(dòng)畫(huà)。

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é)果如下（圖片來(lái)自維基百科）

卷積就是如此神奇?

在 canvas 中實(shí)現(xiàn)卷積處理

以下是一個(gè) JavaScript 對(duì) canvas 輸出的 ImageData 進(jìn)行卷積的實(shí)例：

/* 
 * 參數(shù)中的 kernel 就是卷積核方陣，不過(guò)順著排列成了一個(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)
}

html是什么

html的全稱(chēng)為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

上述內(nèi)容就是如何在HTML5 中使用canvas進(jìn)行圖像處理，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。