使用 opencv4nodejs 将 canvas ImageData (Uint8ClampedArray) 转换为 openCV 矩阵（BRG 或灰色）

Question

我想使用 opencv4nodejs npm 包将 canvas ImageData（Uint8ClampedArray 类型）转换为 n 图像矩阵。

https://www.npmjs.com/package/opencv4nodejs

https://github.com/justadudewhohacks/opencv4nodejs#readme

github README 清楚地解释了如何将图像矩阵转换为canvas ImageData，但没有说明相反使用什么方法。

   const img = ...

// convert your image to rgba color space
const matRGBA = img.channels === 1
  ? img.cvtColor(cv.COLOR_GRAY2RGBA)
  : img.cvtColor(cv.COLOR_BGR2RGBA);

// create new ImageData from raw mat data
const imgData = new ImageData(
  new Uint8ClampedArray(matRGBA.getData()),
  img.cols,
  img.rows
);

我想知道如何将灰度 canvas ImageData 转换为 matGRAY。（或将 rgba ImageData 转换为 BGR 矩阵）。这两种策略对我都非常有帮助！我还没有找到这方面的其他文档。

目标：

const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0,0,canvas.width, canvas.height);

//Then something like this....
// const matGRAY = opencv4nodejs.imagedata2matrix(imageData);

Answer 1

const _ = require('lodash'); // allows fast array transformations in javascript
const Canvas = require('canvas'); //node-canvas on server side
const cv = require('opencv4nodejs');

可以直接从客户端接收Uint8ClampedArray图像数据 ..但在这里我们将从头开始创建它。

const canvas = Canvas.createCanvas('2d');
const ctx = getContext('2d');

const image = new Canvas.Image();
image.onload = () => {
    ctx.drawImage(image,0,0); 
}
image.src = 'path/to/image.jpg'

//get imageData from the image on our canvas
const imageDataObject = ctx.getImageData(0,0,canvas.width,canvas.height);
const imageData = imageDataObject.data;
const width = imageDataObject.width;
const height = imageDataObject.height;

//imageData is Uint8ClampedArray

现在我们有了 Uint8ClampedArray，我们可以转换为矩阵

// convert to normal array
const normalArray = Array.from(imageData);
//nest the pixel channels
const channels = 4 //canvas pixels contain 4 elements: RGBA
const nestedChannelArray = _.chunk(normalArray, channels);
const nestedImageArray = _.chunk(nestedChannelArray, height);

//nestedImageArray is the correct shape to be converted to matrix. 

const RGBAmat = new cv.Mat(nestedImageArray, cv.CV_8UC4);

//openCV often defaults to BGR-type image matrix, so lets color convert the pixel order

const BGRAmat = RGBAmat.cvtColor(cv.COLOR_RGBA2BGRA);

BGRAmat 是一个 openCV 矩阵，可以进行处理了！

如果您是 Node.js 的新手，这里是入门的终端代码。

首先，在您的终端

安装 Node.js 然后运行

$ mkdir canvasToMatrix
$ cd canvasToMatrix
$ npm init -y
$ npm install lodash canvas opencv4nodejs

新建 file.js，并粘贴上面的代码。保存后，运行

$ node file.js

使用 opencv4nodejs 将 canvas ImageData (Uint8ClampedArray) 转换为 openCV 矩阵（BRG 或灰色）

Convert canvas ImageData (Uint8ClampedArray) to openCV matrix (BRG or grey) using opencv4nodejs

opencv

canvas

opencv4nodejs