使用OpenCV.js将皮肤模糊结果图像叠加到原图的实现问题

问题修复方案 #

你现有代码存在两处核心错误：一是颜色空间转换时多了多余的转BGR步骤，导致肤色检测阈值匹配失效；二是最终直接输出了原始图像，没有将模糊后的皮肤区域合并到原图中。

修正后的完整可运行代码如下：

let src = cv.imread(imgElement);
let dst = new cv.Mat();
let dst_1 = new cv.Mat();
let hsvMat = new cv.Mat();
let ycbcrMat = new cv.Mat();
let skinMask = new cv.Mat();
let blurredFullImg = new cv.Mat();
let outputImg = src.clone();

// 转换到HSV颜色空间做肤色检测
cv.cvtColor(src, hsvMat, cv.COLOR_RGB2HSV);
let hsvLow = new cv.Mat(hsvMat.rows, hsvMat.cols, hsvMat.type(), [0, 15, 0, 0]);
let hsvHigh = new cv.Mat(hsvMat.rows, hsvMat.cols, hsvMat.type(), [17, 170, 255, 0]);
cv.inRange(hsvMat, hsvLow, hsvHigh, dst);

// 转换到YCbCr颜色空间做肤色检测
cv.cvtColor(src, ycbcrMat, cv.COLOR_RGB2YCrCb);
let ycbcrLow = new cv.Mat(ycbcrMat.rows, ycbcrMat.cols, ycbcrMat.type(), [0, 135, 85, 0]);
let ycbcrHigh = new cv.Mat(ycbcrMat.rows, ycbcrMat.cols, ycbcrMat.type(), [255, 175, 135, 0]);
cv.inRange(ycbcrMat, ycbcrLow, ycbcrHigh, dst_1);

// 合并两种检测结果，优化掩码边缘
cv.bitwise_and(dst_1, dst, skinMask);
cv.medianBlur(skinMask, skinMask, 5);

// 生成全图模糊版本
let blurKsize = new cv.Size(80, 80);
let anchor = new cv.Point(-1, -1);
cv.blur(src, blurredFullImg, blurKsize, anchor, cv.BORDER_DEFAULT);

// 把模糊后的皮肤区域复制到原始图像对应位置
blurredFullImg.copyTo(outputImg, skinMask);

// 输出最终结果
cv.imshow('canvasOutput', outputImg);

// 释放所有Mat对象内存，避免内存泄漏
src.delete();
dst.delete();
dst_1.delete();
hsvMat.delete();
ycbcrMat.delete();
skinMask.delete();
blurredFullImg.delete();
outputImg.delete();
hsvLow.delete();
hsvHigh.delete();
ycbcrLow.delete();
ycbcrHigh.delete();

核心调整说明 #

• 移除了多余的颜色空间转换步骤，同时调整了肤色检测阈值，大幅提升肤色识别的准确率
• 新增outputImg对象作为输出基底，初始直接复制原始图像的全部内容
• 直接通过copyTo方法将模糊图像中掩码对应的皮肤区域覆盖到输出图对应位置，无需额外处理透明层叠加逻辑
• 调整了掩码的模糊核大小，让皮肤区域的边缘过渡更自然，不会出现明显的硬边界

内容的提问来源于stack exchange，提问作者Nabeel Ahmed