如何提升应用中图像捕获的分辨率与清晰度

一、前端JavaScript部分优化 #

1. 强制获取高分辨率视频流 #

修改startVideo函数的摄像头配置，指定优先获取高分辨率视频，避免默认低分辨率输出：

async function startVideo(src) {
    try {
        const permission = await checkCameraPermission();
        if (permission === 'prompt' || permission === 'granted') {
            navigator.getUserMedia(
                { 
                    video: { 
                        width: { ideal: 1920, max: 4096 }, 
                        height: { ideal: 1080, max: 2160 },
                        facingMode: 'environment' // 移动端优先调用后置摄像头，需前置可改为'user'
                    }, 
                    audio: false 
                },
                function (localMediaStream) {
                    let video = document.getElementById(src);
                    video.srcObject = localMediaStream;
                    video.onloadedmetadata = function (e) {
                        video.play();
                    };
                },
                function (err) {
                    console.error('Error accessing camera:', err);
                    throw err;
                }
            );
        } else {
            console.error('Camera permission denied.');
        }
    } catch (error) {
        console.error('Error starting video:', error);
    }
}

2. 移除冗余缩放步骤，直接捕获原始帧 #

getFrame中先缩小再放大的操作是模糊核心原因，改为直接按视频原始尺寸捕获，或按需高质量缩放：

function getFrame(src, dest, dotnetHelper) {
    let video = document.getElementById(src);
    let canvas = document.getElementById(dest);

    if (video && canvas) {
        // 直接用视频原始宽高捕获帧，避免缩放损失
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

        // 如需固定尺寸，直接从视频帧绘制到目标画布（开启高质量插值）
        // let resizedCanvas = document.createElement('canvas');
        // resizedCanvas.width = 200;
        // resizedCanvas.height = 200;
        // let ctx = resizedCanvas.getContext('2d');
        // ctx.imageSmoothingEnabled = true;
        // ctx.imageSmoothingQuality = 'high';
        // ctx.drawImage(video, 0, 0, resizedCanvas.width, resizedCanvas.height);
        // let dataUrl = resizedCanvas.toDataURL("image/jpeg", 0.95);

        // 生成高质量JPEG（质量值0.95，最高可设1.0）
        let dataUrl = canvas.toDataURL("image/jpeg", 0.95);

        dotnetHelper.invokeMethodAsync('ProcessImage', dataUrl);
    } else {
        console.error('Video or canvas element not found.');
    }
}

二、.NET后端部分优化 #

1. 提升JPEG编码质量 #

当前JPEG质量设为85，可调整到95减少压缩损失（需控制文件大小不超限）：

var encoder = new SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder { Quality = 95 };

2. 避免重复编码损失画质 #

如果前端已生成高质量JPEG，后端可直接使用原始字节，跳过二次编码：

if (!result.Canceled)
{
    string imageUri = result.Data.ToString();
    byte[] bytes = Convert.FromBase64String(imageUri.Split(',')[1]);

    if (bytes.Length > Constants.IMAGE_MAX_SIZE)
    {
        Snackbar.Add($"The Captured image exceeds the maximum size limit : 20 MB.", Severity.Warning);
    }
    else
    {
        // 直接使用前端传入的原始字节，无需重新编码
        iTSimageCopy.Images.Add(new Image { Data = bytes });
        iTSimage = iTSimageCopy;
    }
}

三、其他注意事项 #

• 视频元素CSS设置object-fit: contain，避免显示拉伸导致视觉模糊。
• 移动端捕获时尽量保持设备稳定，减少抖动模糊。

内容的提问来源于stack exchange，提问作者Aditi Jaiswal