opencvjs – convert python to javascript

Question

I am trying to convert the following python code using opencv for image processing into javascript using opencvjs, but seem to be missing something as the output is not quite the same.

Would be great if someone could help me out here as the docs for opencvjs are few and far between.

python code:

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)

My javascript code:

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();

The original image:

What python outputs:

What my javascript outputs:

Asked By: hyprstack

||

Source

Answer 1

TL;DR

Try replacing COLOR_BGR2HSV with cv.COLOR_RGB2HSV.

Implementation

Comparing opencv-python 4.5.3.56 with opencv.js 3.4.0, the image being read had the green and red channels swapped.

A direct translation of your python code would look like this:

// 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();

Debug Method

You could try logging the images as matrices, so the swapped channels would be easily spotted, but I resorted to furas’ suggestion above: display the results after every modification. Here are the results of your Python code and your JavaScript code, respectively:

Answered By: nickh

opencvjs – convert python to javascript

Question:

Answers:

TL;DR

Implementation

Debug Method