MediaPipe人脸检测Canvas绘图：图像缩小、画质差问题求助

我开发了一款基于MediaPipe API的Web应用，使用后置摄像头检测人脸并拍照。拍照后获取MediaPipe返回的result.image对象绘制到Canvas上，其余功能正常，但图像在Canvas上被缩小且画质不佳。已尝试调整宽高约束、更改宽高比等方法，仍未解决问题，附上相关代码，求解决图像缩放控制与画质提升的问题。

打开摄像头的代码 #

const videoHeight = 1080;
const videoWidth = 1920
const mode = 'environment';
const camera = new Camera(videoRef.current, {
    onFrame: async () => {
        await faceDetection.send({ image: videoRef.current });
    },
    facingMode: {
        exact: mode
    },
    width: {
        min: videoWidth
    },
    height: {
        min: videoHeight
    }
});
camera.start();

绘制图像到Canvas的代码 #

const getDimensions = (result) => {
    var maxWidth = videoRef.current.clientWidth; // Max width for the image
    var maxHeight = videoRef.current.clientHeight;    // Max height for the image

    var ratio = 0;  // Used for aspect ratio
    var width = result.image.width;    // Current image width
    var height = result.image.height;  // Current image height

    // Check if the current width is larger than the max
    if (width > maxWidth) {
        ratio = maxWidth / width;   // get ratio for scaling image
        height = height * ratio;    // Reset height to match scaled image
        width = width * ratio;    // Reset width to match scaled image
    }

    // Check if current height is larger than max
    if (height > maxHeight) {
        ratio = maxHeight / height; // get ratio for scaling image
        width = width * ratio;    // Reset width to match scaled image
        height = height * ratio;    // Reset height to match scaled image
    }
    return { width: width, height: height }
}

const canvasElement = canvasImgRef.current;
const clientDims = getDimensions(result);  // result is the mediaPipe result
canvasElement.width = clientDims.width;
canvasElement.height = clientDims.height;
let canvasCtx = canvasElement.getContext('2d');
canvasCtx.save();
canvasCtx.clearRect(0, 0, clientDims.width, clientDims.height);
canvasCtx.drawImage(result.image, 0, 0, clientDims.width, clientDims.height); // result.image is the mediaPipe image

if (result.detections.length > 0) {
    result.detections.forEach(detection => {
        drawRectangle(canvasCtx, detection.boundingBox, { color: 'black', lineWidth: 2, fillColor: 'black' });
    })
}
canvasCtx.restore();

1. 修正Canvas尺寸与像素密度适配 #

浏览器中Canvas的width/height是像素尺寸，而clientWidth/clientHeight是显示尺寸，直接用后者设置Canvas像素尺寸会导致图像压缩。需结合设备像素比（DPR）设置真实像素尺寸：

const getDimensions = (result) => {
    const dpr = window.devicePixelRatio || 1;
    // 基于显示尺寸计算真实像素尺寸
    const maxWidth = videoRef.current.clientWidth * dpr;
    const maxHeight = videoRef.current.clientHeight * dpr;

    const imageRatio = result.image.width / result.image.height;
    const containerRatio = maxWidth / maxHeight;
    let width, height;

    // 保持原图像比例，计算合适的缩放尺寸
    if (imageRatio > containerRatio) {
        width = maxWidth;
        height = maxWidth / imageRatio;
    } else {
        height = maxHeight;
        width = maxHeight * imageRatio;
    }

    return { width: Math.round(width), height: Math.round(height) }
}

同时给Canvas设置CSS样式，让显示尺寸匹配容器：

canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

2. 提升绘制画质 #

调用drawImage前开启Canvas高质量平滑模式，避免缩放锯齿：

let canvasCtx = canvasElement.getContext('2d');
// 开启高质量缩放
canvasCtx.imageSmoothingEnabled = true;
canvasCtx.imageSmoothingQuality = 'high'; // 可选值：low/medium/high

3. 确保摄像头输出原始分辨率 #

MediaPipe Camera类默认可能降采样图像，需明确设置ideal分辨率，而非仅min：

const camera = new Camera(videoRef.current, {
    onFrame: async () => {
        await faceDetection.send({ image: videoRef.current });
    },
    facingMode: {
        exact: mode
    },
    width: {
        ideal: videoWidth,
        min: videoWidth
    },
    height: {
        ideal: videoHeight,
        min: videoHeight
    }
});

可通过以下代码确认摄像头实际输出分辨率：

videoRef.current.addEventListener('loadedmetadata', () => {
    console.log('实际视频分辨率:', videoRef.current.videoWidth, videoRef.current.videoHeight);
});

4. 避免多次缩放损失画质 #

MediaPipe返回的result.image可能经过处理，建议直接从video元素取原始帧绘制：

// 拍照时直接从video获取原始帧
const captureFrame = () => {
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = videoRef.current.videoWidth;
    tempCanvas.height = videoRef.current.videoHeight;
    const ctx = tempCanvas.getContext('2d');
    ctx.drawImage(videoRef.current, 0, 0);
    return tempCanvas; // 包含原始分辨率的帧
}

用这个临时Canvas绘制到目标Canvas，减少中间环节的画质损失。

内容的提问来源于stack exchange，提问作者Kiran Kumar