前端使用openCV處理圖片的基礎

前言

前文我們講了openCV如何在前端應用。

本文主要根據官方文件的Core Operations部分，帶大家瞭解OpenCV圖片處理時需要的一些基礎知識，比如mat資料型別的操作，繪製形狀等等。

獲取圖片屬性

let src = cv。imread（‘imageUpload’）；console。log（‘image width： ’ + src。cols + ‘\n’ + ‘image height： ’ + src。rows + ‘\n’ + ‘image size： ’ + src。size（）。width + ‘*’ + src。size（）。height + ‘\n’ + ‘image depth： ’ + src。depth（） + ‘\n’ + ‘image channels ’ + src。channels（） + ‘\n’ + ‘image type： ’ + src。type（） + ‘\n’）；

比如上面這張圖的屬性打印出來就是：

image width： 600image height： 473image size： 600*473image depth： 0image channels 4image type： 24

Mat

構造Mat

建立Mat例項時，可以傳入

size， type

或者

rows， cols， type

，一般用預設構造方式：

let mat = new cv。Mat（）；

或者用陣列來構建：

// 比如： let mat = cv。matFromArray（2， 2， cv。CV_8UC1， ［1， 2， 3， 4］）；let mat = cv。matFromArray（rows， cols， type， array）；

或者用imgData：

let ctx = canvas。getContext（“2d”）；let imgData = ctx。getImageData（0， 0， canvas。width， canvas。height）；let mat = cv。matFromImageData（imgData）；

另外，還有3個靜態函式：

// 1。 建立一個全是0的Matlet mat = cv。Mat。zeros（rows， cols， type）；// 2。 建立一個全是1的Matlet mat = cv。Mat。ones（rows， cols， type）；// 3。 建立一個單位矩陣的Matlet mat = cv。Mat。eye（rows， cols， type）；

注意：Mat例項一定記得要及時刪除。

複製Mat

有2種複製方法：

// 1。 Clonelet dst = src。clone（）；// 2。 CopyTosrc。copyTo（dst， mask）；

轉換Mat型別

src。convertTo（dst， rtype）

rtype代表期望的輸出矩陣型別，或者說是深度，因為通道的數量與輸入相同；如果rtype為負，輸出矩陣的型別將與輸入矩陣的相同。

讀寫畫素

data

首先，需要了解不同的Data屬性在不同語言中的type之間的關係：

透過data獲取畫素：

let row = 3， col = 4；let src = cv。imread（“canvasInput”）；if （src。isContinuous（）） { let index = row * src。cols * src。channels（） + col * src。channels（） let R = src。data［index］； let G = src。data［index + 1］； let B = src。data［index + 2］； let A = src。data［index + 3］；}

注意：

data操作只對連續的Mat有效，使用前應該用

isContinuous

函式檢查。

at

透過at獲取畫素：

let row = 3， col = 4；let src = cv。imread（“canvasInput”）；let colIndex = col * src。channels（）let R = src。ucharAt（row， colIndex）；let G = src。ucharAt（row， colIndex + 1）；let B = src。ucharAt（row， colIndex + 2）；let A = src。ucharAt（row， colIndex + 3）；

注意：

at操作只能讀，不能寫。

ptr

mat。ucharPtr（k）

獲取mat的第k行，

mat。ucharPtr（i， j）

獲取mat的第i行第j列。

let row = 3， col = 4；let src = cv。imread（“canvasInput”）；let pixel = src。ucharPtr（row， col）；let R = pixel［0］；let G = pixel［1］；let B = pixel［2］；let A = pixel［3］；

顏色通道操作

有時我們需要單獨操作圖片的R/G/B通道，這時就需要對顏色通道進行分割，處理完畢後再合併。

let src = cv。imread（“canvasInput”）；let rgbaPlanes = new cv。MatVector（）；// 分割cv。split（src， rgbaPlanes）；// 獲取R通道let R = rgbaPlanes。get（0）；// 合併cv。merge（rgbaPlanes， src）；src。delete（）； rgbaPlanes。delete（）； R。delete（）；

座標點Point

有2種方式建立一個點：

let point = new cv。Point（x， y）；let point = {x： x， y： y}；

畫素點Scalar

let scalar = new cv。Scalar（R， G， B， Alpha）；let scalar = ［R， G， B， Alpha］；

尺寸Size

let size = new cv。Size（width， height）；let size = {width ： width， height ： height}；

圓

let circle = new cv。Circle（center， radius）；let circle = {center ： center， radius ： radius}；

方形

let rect = new cv。Rect（x， y， width， height）；let rect = {x ： x， y ： y， width ： width， height ： height}；

帶旋轉角度的方形：

let rotatedRect = new cv。RotatedRect（center， size， angle）；let rotatedRect = {center ： center， size ： size， angle ： angle}；

透過下面的方法獲取方形的4個頂點：

let vertices = cv。RotatedRect。points（rotatedRect）；let point1 = vertices［0］；let point2 = vertices［1］；let point3 = vertices［2］；let point4 = vertices［3］；

透過下面的方法獲取方形的邊界：

let boundingRect = cv。RotatedRect。boundingRect（rotatedRect）；