1. 簡介

• OpenCV.js: OpenCV 的 JavaScript 版本

• 官方指南：OpenCV.js Tutorials

2. 下載

• 可通過如下鏈接下載到指定版本的預編譯 opencv.js 文件

  https://docs.opencv.org/{version}/opencv.js

• 比如下載 4.5.5 版本的 opencv.js 文件

  https://docs.opencv.org/4.5.5/opencv.js

3. 安裝使用

HTML script 標簽引入

<!-- OpenCV.js 4.5.5 版本 --> <script src='https://docs.opencv.org/4.5.5/opencv.js'></script>

node.js 使用

// 加載 OpenCV.js function loadOpenCV(path) {return new Promise(resolve => {global.Module = {onRuntimeInitialized: resolve};global.cv = require(path);}); }// 加載并創建一個圖像 async function run(path){await loadOpenCV(path)let img = new cv.Mat()img.delete() }// 設置文件路徑 const path = './opencv.js'// 運行 run(path)

4. 數據類型

• 圖像數據類型

  • Mat 是 OpenCV 基礎的圖像數據結構，其數據類型對照表如下：

    Data PropertiesC++ TypeJavaScript Typed ArrayMat Type

    data	uchar	Uint8Array	CV_8U
    data8S	char	Int8Array	CV_8S
    data16U	ushort	Uint16Array	CV_16U
    data16S	short	Int16Array	CV_16S
    data32S	int	Int32Array	CV_32S
    data32F	float	Float32Array	CV_32F
    data64F	double	Float64Array	CV_64F

  • MatVector 即多個 Mat 組成的向量，使用 push_back(mat: cv.Mat)、 get(index: number) 和 set(index: number, mat: cv.Mat)方法添加、讀取和設置 Mat 至 MatVector 中

  • Mat 和 MatVector 類型的變量請在不再需要使用的時候使用 delete() 方法將其刪除，否則該變量將會持續占用內存

  • 簡單的創建和刪除方式如下：

    // 創建一個 Mat let mat = new cv.Mat()// 創建一個 MatVector let matVector = new cv.MatVector()// 添加一個 Mat matVector.push_back(mat)// 獲取 index 為 0 的 Mat mat = matVector.get(0)// 設置 index 為 0 的 Mat matVector.set(0, mat)// 刪除 Mat mat.delete()// 刪除 MatVector matVector.delete()

• 其他數據類型及其對應的 JS 對象格式，創建變量時兩種方式均可使用

  // 坐標點 new cv.Point(x, y) = {x: number, y: number }// 像素點 new cv.Scalar(R, G, B, Alpha) = [R: number, G: number, B: number, Alpha: number ]// 圖像尺寸 new cv.Size(width, height) = {width: number, height: number }// 圓形區域 new cv.Circle(center, radius) = {center: {x: number,y: number}, radius: number }// 矩形區域 new cv.Rect(x, y, width, height) = {x: number, y: number, width: number, height: number }// 旋轉矩形區域 new cv.RotatedRect(center, size, angle) = {center: {x: number,y: number}, size: {width: number, height: number },angle: number }

5. API

• OpenCV.js 的 API 與 OpenCV C++ 版本 API 非常相似

• OpenCV.js 常用的 API 如下：

  • 圖像讀取和顯示

    // 讀取 cv.imread(dom) -> dst// 顯示 cv.imshow(dst, dom) dom(Dom/string): img 標簽或其 id（讀取） / canvas 標簽或其 id（讀取/顯示）dst(cv.Mat): 圖像（RGBA）

  • 創建圖像

    // 創建一個 Mat 格式的圖像 new cv.Mat() -> mat new cv.Mat(size, type) -> mat new cv.Mat(rows, cols, type) -> mat new cv.Mat(rows, cols, type, scalar) -> mat// 創建一個值全部為零的圖像 cv.Mat.zeros(rows, cols, type) -> mat// 創建一個值全部為一的圖像 cv.Mat.ones(rows, cols, type) -> mat// 創建一個對角線值為一的圖像 cv.Mat.eye(rows, cols, type) -> mat// 使用 JS Array 生成圖像 cv.matFromArray(rows, cols, type, array) -> mat// 使用 canvas ImageData 生成圖像 cv.matFromImageData(imgData) - mat size(cv.size): 圖像尺寸rows(number): 圖像高度cols(number): 圖像寬度type(number): 圖像類型（cv.CV_8UC3 ...）scalar(cv.Scalar): 圖像初始值array(Array): JS 圖像數組imgData(ImageData): canvas 圖像數據mat(cv.Mat): 圖像（type）

  • 獲取圖像屬性

    // 圖像高度 mat.rows -> rows// 圖像寬度 mat.cols -> cols// 圖像尺寸 mat.size() -> size// 圖像通道數量 mat.channels() -> channels// 圖像數據類型 mat.type() -> type mat(cv.Mat): 圖像rows(number): 圖像高度cols(number): 圖像寬度size(cv.Size): 圖像尺寸channles(number): 圖像通道數量type(number): 圖像數據類型（cv.CV_8UC3 ...）

  • 獲取圖像數據

    mat.data -> data mat.data8S -> data8S mat.data16U -> data16U mat.data16S -> data16S mat.data32S -> data32S mat.data32F -> data32F mat.data64F -> data64F mat(cv.Mat): 圖像data(Uint8Array): 無符號 8 位整型數據data8S(Int8Array): 有符號 8 位整型數據data16U(Uint16Array): 無符號 16 位整型數據data16S(Int16Array): 有符號 16 位整型數據data32S(Int32Array): 有符號 32 位整型數據data32F(Float32Array): 32 位浮點數據data64F(Float64Array): 64 位浮點數據

  • 裁切圖像

    mat.roi(rect) -> matROI rect(cv.Rect): 圖像裁切區域matROI(cv.Mat): 裁切圖像

  • 顏色空間轉換

    cv.cvtColor(src, dst, code) src(cv.Mat): 輸入圖像dst(cv.Mat): 輸出圖像code(number): 轉換類型（cv.COLOR_RGBA2RGB ...）

  • 圖像縮放

    cv.resize(src, dst, dsize, fx, fy, interpolation) src(cv.Mat): 輸入圖像dst(cv.Mat): 輸出圖像dsize(cv.Size): 目標尺寸fx(number): x 軸縮放因子fy(number): y 軸縮放因子interpolation(number): 插值類型（cv.INTER_LINEAR ...）

  • 創建圖像向量

    new cv.MatVector() -> matVector matVector(cv.MatVector): 圖像向量

  • 圖像向量操作

    // 添加 matVector.push_back(mat)// 獲取 matVector.get(index) -> mat// 設置 matVector.set(index, mat) matVector(cv.MatVector): 圖像向量mat(cv.Mat): 圖像index(number): 索引值

  • 通道拆分與合并

    // 拆分 cv.split(src, channels)// 合并 cv.merge(channels, dst) src(cv.Mat): 輸入圖像dst(cv.Mat): 輸出圖像channels(cv.MatVector): 通道圖像向量

  • 刪除對象

    // 刪除圖像對象 mat.delete()// 刪除圖像向量對象 matVector.delete() mat(cv.Mat): 圖像matVector(cv.MatVector): 圖像向量

  • 創建視頻流

    new cv.VideoCapture(videoSource) -> cap videoSource(Dom/string): video 標簽或其 idcap(cv.VideoCapture): 視頻流

  • 讀取視頻幀

    cap.read(mat) cap(cv.VideoCapture): 視頻流mat(cv.Mat): 圖像

• 更多 API 和詳細信息請參考官方文檔：OpenCV Docs

• 更多示例代碼請參考官方指南：OpenCV.js Tutorials

總結

以上是生活随笔為你收集整理的OpenCV.js 快速入门指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。