使用 opencv4nodejs 将画布 ImageData（Uint8ClampedArray）转换为 openCV 矩阵（BRG 或灰色）答案

【问题标题】：Convert canvas ImageData (Uint8ClampedArray) to openCV matrix (BRG or grey) using opencv4nodejs使用 opencv4nodejs 将画布 ImageData（Uint8ClampedArray）转换为 openCV 矩阵（BRG 或灰色）
【发布时间】：2019-09-07 02:34:39
【问题描述】：

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

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

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

github README 清楚地解释了如何将图像矩阵转换为画布 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
);

我想知道如何将灰度画布 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);

【问题讨论】：

标签： opencv canvas opencv4nodejs

【解决方案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

【讨论】：