opencvjs

Question

我正在尝试将使用 opencv 进行图像处理的以下 python 代码转换为使用 opencvjs 的 javascript，但由于输出是不太一样。

如果有人能在这里帮助我，那就太好了，因为 opencvjs 的文档很少。

python代码：

img = cv.imread(inPath)
frame_HSV = cv.cvtColor(img, cv.COLOR_BGR2HSV)
frame_mask = cv.inRange(frame_HSV, (30, 50, 0), (80, 255, 255))

frame_mask = cv.bitwise_not(frame_mask)
frame_result = cv.bitwise_and(img, img, mask = frame_mask)
cv.imwrite(outPath, frame_result)

我的javascript代码：

const src = cv.imread('canvasInput');
const dst = new cv.Mat();
const hsv = new cv.Mat();
const hsvMask = new cv.Mat();
const hsvMaskInv = new cv.Mat();

cv.cvtColor(src, hsv, cv.COLOR_BGR2HSV, 0);


const low = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [30, 50, 0, 0]);
const high = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [80, 255, 255, 255]);

cv.inRange(hsv, low, high, hsvMask);

cv.bitwise_not(hsvMask, hsvMaskInv);
cv.bitwise_and(src, src, dst, hsvMaskInv);

cv.imshow('canvasOutput', dst);
src.delete();
dst.delete();
low.delete();
high.delete();
hsv.delete();
hsvMask.delete();
hsvMaskInv.delete();

原图：

什么 python 输出：

我的 javascript 输出：

Answer 1

TL;DR

尝试将 COLOR_BGR2HSV 替换为 cv.COLOR_RGB2HSV。

实施

比较 opencv-python 4.5.3.56 和 opencv.js 3.4.0，正在读取的图像交换了绿色和红色通道。

您的 python 代码的直接翻译如下所示：

// img = cv.imread(inPath)
let img = cv.imread(imgElement);

// frame_HSV = cv.cvtColor(img, cv.COLOR_BGR2HSV)
let frameHSV = new cv.Mat();
cv.cvtColor(img, frameHSV, cv.COLOR_RGB2HSV, 0);

// frame_mask = cv.inRange(frame_HSV, (30, 50, 0), (80, 255, 255))
let frameMask = new cv.Mat();
let low = new cv.Mat(frameHSV.rows, frameHSV.cols, frameHSV.type(), [30, 50, 0, 0]);
let high = new cv.Mat(frameHSV.rows, frameHSV.cols, frameHSV.type(), [80, 255, 255, 255]);
cv.inRange(frameHSV, low, high, frameMask);

// frame_mask = cv.bitwise_not(frame_mask)
cv.bitwise_not(frameMask, frameMask);

// frame_result = cv.bitwise_and(img, img, mask = frame_mask)
let frameResult = new cv.Mat();
cv.bitwise_and(img, img, frameResult, frameMask);

// cv.imwrite(outPath, frame_result)
cv.imshow('canvasOutput', frameResult);

img.delete(); frameHSV.delete(); frameMask.delete();
low.delete(); high.delete(); frameResult.delete();

调试方法

您可以尝试将图像记录为矩阵，这样可以很容易地发现交换的通道，但我采用了上面 furas 的建议：在每次修改后显示结果。以下是您的 Python 代码和 JavaScript 代码的结果，分别为：

opencvjs - 将 python 转换为 javascript

opencvjs - convert python to javascript

javascript

python

opencv

TL;DR

实施

调试方法