While capturing image i am getting poor quality of image
My capture image code is
private async Task CaptureImage()
{
Snackbar.Clear();
Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
if (SavedImages.Count + selectedImagesFromSM.Count < 3)
{
var options = new DialogOptions
{
FullWidth = true,
DisableBackdropClick = true,
Position = DialogPosition.Center
};
var result = await DialogService.Show<ImageCaptureDialog>("Capture Image", options).Result;
if (!result.Cancelled)
{
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 = 100 };
image.Save(outputStream, encoder);
imageStreamToBytes = outputStream.ToArray();
}
}
selectedImagesFromSM.Add(new ITSImage { PartNumber = int.Parse(selectedPartNumber), Images = new List<Image> { new Image { Data = imageStreamToBytes } } });
}
await CheckPartNumberImageCount();
}
}
else
{
Snackbar.Add("You can capture only 3 images.", Severity.Warning);
}
}
camera.js function is
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.');
}
}
I have Added the code please check where i am doing mistake
Although my camera produces good quality images, the captured images in my application appear low-quality. How can I improve the image quality?