We use the opencv.js to process images from web browser. the complete procedures are:
- load the image. This image has 6 types of pixels which are 0,1,2,3,4 and 5
- convert all colors to blue except those pixels which have values of 0
- show the new image
The problem is it takes so much time for step 2.
what we do now is like below:
let maskImgMat = cv.imread(maskElement);
let metaData = new Array();
for (var i = 1; i <=5; i++) {
var metaItem = new Object();
metaItem.ID = i
metaData.push(metaItem)
}
let objectIds = new Set();
if (maskMeta) {
maskMeta.forEach(function (s) {objectIds.add(s["ID"])} )
}
// below code snippet will take about 3 seconds
// to process an image of size 2000 * 30000
for (var i = 0; i < maskImgMat.rows; i++) {
for (var j = 0; j < maskImgMat.cols; j++) {
var pixel = maskImgMat.ucharPtr(i, j);
var R = pixel[0];
if (objectIds.has(R)) {
maskImgMat.ucharPtr(i, j)[0] = 0 // red
maskImgMat.ucharPtr(i, j)[1] = 0 // green
maskImgMat.ucharPtr(i, j)[2] = 255 // blue
maskImgMat.ucharPtr(i, j)[3] = 128 // alpha
} else {
maskImgMat.ucharPtr(i, j)[3] = 0
}
}
}
Is there other way to do that with good performance? how can we do it by opencv api?