如何在图像中提供高分辨率

Question

我在应用程序中使用图像，但在捕获时图像变得模糊 我的捕获图像代码是

 private async Task CaptureImage()
 {
     int maxAllowedImages = 3;
     int currentImageCount = iTSimageCopy != null ? iTSimageCopy.Images.Count : 0;

     if (currentImageCount >= maxAllowedImages)
     {
         Snackbar.Add($"Part number already has the maximum allowed images ({maxAllowedImages}).", Severity.Warning);
         return;
     }

     DialogParameters parameters = new DialogParameters();
     var options = new DialogOptions
         {
             FullWidth = true,
             DisableBackdropClick = true,
             Position = DialogPosition.Center
         };
     DialogResult result = await DialogService.Show<EditCaptureImgDialog>("Capture Image", parameters, options).Result;

     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
         {
             byte[] imageStreamToBytes;

             using (var image = SixLabors.ImageSharp.Image.Load(bytes))
             {
                 using (MemoryStream outputStream = new MemoryStream())
                 {
                     var encoder = new SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder { Quality = 85 };
                     image.Save(outputStream, encoder);

                     imageStreamToBytes = outputStream.ToArray();
                 }
             }

             iTSimageCopy.Images.Add(new Image { Data = imageStreamToBytes });
             iTSimage = iTSimageCopy;
         }

        
     }
 }

我的js函数是

async function startVideo(src) {
    try {
        const permission = await checkCameraPermission();
        if (permission === 'prompt' || permission === 'granted') {
            navigator.getUserMedia(
                { video: true, 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; // Propagate the error
                }
            );
        } else {
            console.error('Camera permission denied.');
        }
    } catch (error) {
        console.error('Error starting video:', error);
    }
}



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

    // Check if the video and canvas elements exist before drawing the image
    if (video && canvas) {
        canvas.getContext('2d').drawImage(video, 0, 0, 150, 150);

        // Resize the image on the canvas
        let resizedCanvas = document.createElement('canvas');
        resizedCanvas.width = 200; // Set desired width
        resizedCanvas.height = 200; // Set desired height
        let ctx = resizedCanvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, resizedCanvas.width, resizedCanvas.height);

        // Convert the resized image to base64 JPEG format
        let dataUrl = resizedCanvas.toDataURL("image/jpeg");

        // Invoke the .NET method with the resized image data
        dotnetHelper.invokeMethodAsync('ProcessImage', dataUrl);
    } else {
        console.error('Video or canvas element not found.');
    }
}

如何提供最高质量的图像，以便在捕获图像时获得良好的图像质量。我的手机和笔记本电脑图像在捕捉图像时都显示模糊

首页提高图像质量

Answer 1

为了提高拍摄图像的质量，可以尝试在调用navigator.getUserMedia时设置较高的Aspect_ratio，如

1920x1080 (1080p) or 1280x720 (720p)

等。 https://developer.mozilla.org/en-US/docs/Glossary/Aspect_ratio

navigator.getUserMedia( { video: { width: 1280, height: 720 }, audio: false }

,

并设置图像格式和质量参数。 EncoderOptions 参数是一个介于 0 和 1 之间的数字，用于指定图像质量，其中 1.0 表示最高质量。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#setting_image_quality_with_jpegs

使用SixLabors.ImageSharp时，您可以设置更高的质量参数。默认值通常为 75。 https://docs.sixlabors.com/api/ImageSharp/SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder.html#SixLabors_ImageSharp_Formats_Jpeg_JpegEncoder_Quality