Decreased photo quality After Take a Picture in Javascript

user_6827699 0
Viewed 79

i need to use the camera for take a photo from user .

i did it , but I have a problem with that .

Decreased photo quality after user take a picture . the quality important for me , because user must take image from text written on the paper and the quality of the image is important .

this is my code for convert video to image :

  drawImageToCanvas(image: any, width: number, height: number) {
return this.canvas.nativeElement
  .getContext('2d')
  .drawImage(image, 0, 0, width, height);
  }

  takePhoto(): void {
    this.drawImageToCanvas(this.video.nativeElement, 400, 400);

this.img = this.canvas.nativeElement.toDataURL('image/png');
console.log(this.canvas.nativeElement.toDataURL('image/png'));
this.DownloadFile(
  this.canvas.nativeElement.toDataURL('image/png'),
  'image'
);
  }

Demo

how can keep the quilty of image after take a photo ??

webrtc node.js javascript
1 Answers

Do you mean custom image quality? I use this code to capture an image in Google Colab, you can get some idea about image quality from the Javascript code that i provided below (along with Python). I don't know much about JS but i hope tis code helps you in some way

from IPython.display import display, Javascript, Image # Take a Photo here and save it as 'photo.jpg'
from google.colab.output import eval_js
from base64 import b64decode
from random import choice
import os
 
def take_photo(filename='photo.jpg', quality=0.8):
  file_format_dict = {'png' : ['image/png'], 'gif' : ['image/gif'], 'bmp' : ['image/bmp'], 'webp' : ['image/webp'], 'avif' : ['image/avif'], 'apng' : ['image/apng'], 'svg' : ['image/svg+xml'], ('tif', 'tiff') : ['image/tiff'], ('ico', 'cur') : ['image/x-icon'], 'xbm' : ['image/xbm', 'image-xbitmap'], ('jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp') : ['image/jpeg']}
  for i in file_format_dict.keys():
    if filename.split('.')[-1] in i:
      file_format = choice(file_format_dict[i])
 
  display(Javascript('''
    async function takePhoto(file_format, quality) {
      const div = document.createElement('div');
      const capture = document.createElement('button');
      capture.textContent = 'Capture';
      div.appendChild(capture);
 
      const video = document.createElement('video');
      video.style.display = 'block';
      const stream = await navigator.mediaDevices.getUserMedia({video: true});
 
      document.body.appendChild(div);
      div.appendChild(video);
      video.srcObject = stream;
      await video.play();
 
      google.colab.output.setIframeHeight(document.documentElement.scrollHeight, true); // Resize the output to fit the video element.
// The above line works only in Google Colab to create a canvas for camera preview
      await new Promise((resolve) => capture.onclick = resolve); // Wait for Capture to be clicked.
 
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);
      stream.getVideoTracks()[0].stop();
      div.remove();
      return canvas.toDataURL(file_format, quality);
    }'''))
 
  data = eval_js('takePhoto({}, {})'.format(file_format, quality))
  binary = b64decode(data.split(',')[1])
  with open(filename, 'wb') as f:
    f.write(binary)
  return filename
 
try:
  filename = take_photo(filename='photo.png', quality=1)
  print(f'Saved to {filename}'.format())
  display(Image(filename)) # Show the image which was just taken
except Exception as e:
  print(str(e))
user_166938880
Related