opencv - 使用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