What is the best way to reduce the size of a Base64/Binary image in Angular6

Question

What is the best way to reduce the size of a Base64/Binary image in Angular6

I utilized the Ngx-Webcam tool to capture images from my camera. My goal is to obtain both high quality and low quality images from the camera.

Although this library provides me with Base64 images, it offers an option to reduce the size using imageQuality. However, I cannot use this feature as I require both high quality and low quality images.

let data = webcamImage.imageAsBase64;
const raw = window.atob(data);

const rawLength = raw.length;
const unit8array = new Uint8Array(new ArrayBuffer(rawLength));

for (let i = 0; i < rawLength; i++) {
  unit8array[i] = raw.charCodeAt(i);
}

I attempted to implement a solution using https://www.npmjs.com/package/image-conversion for our issue.

let data = webcamImage.imageAsBase64;
const raw = window.atob(data);
let contentType = raw.split(';')[0];

const rawLength = raw.length;
const unit8array = new Uint8Array(new ArrayBuffer(rawLength));

for (let i = 0; i < rawLength; i++) {
  unit8array[i] = raw.charCodeAt(i);
}

let blob = new Blob([unit8array], {type: contentType});
imageProcess.compress(blob, 0.4);

Unfortunately, this approach did not work. I am now seeking another solution to compress the image.

javascript typescript

Answer 1

Answer №1

I discovered a method to compress images using canvas

compress(webcamImage: WebcamImage, quality: number): Observable<string> {
  let _canvas = this.canvas;
  let width = webcamImage.width;
  let height = webcamImage.height;

  _canvas.width = width;
  _canvas.height = height;

  // drawing snapshot image on canvas
  const img = new Image();
  img.src = webcamImage.imageAsDataUrl;
  return Observable.create(observe => {
    (img.onload = () => {
      const context2d = _canvas.getContext('2d');
      context2d.drawImage(img, 0, 0, width, height);
      // converting canvas content to compressed image
      const mimeType: string = webcamImage.mineType;
      const dataUrl: string = _canvas.toDataURL(mimeType, quality);
      observe.next(dataUrl);
    });
  });
}

Answer 2

I discovered a method to compress images using canvas

compress(webcamImage: WebcamImage, quality: number): Observable<string> {
  let _canvas = this.canvas;
  let width = webcamImage.width;
  let height = webcamImage.height;

  _canvas.width = width;
  _canvas.height = height;

  // drawing snapshot image on canvas
  const img = new Image();
  img.src = webcamImage.imageAsDataUrl;
  return Observable.create(observe => {
    (img.onload = () => {
      const context2d = _canvas.getContext('2d');
      context2d.drawImage(img, 0, 0, width, height);
      // converting canvas content to compressed image
      const mimeType: string = webcamImage.mineType;
      const dataUrl: string = _canvas.toDataURL(mimeType, quality);
      observe.next(dataUrl);
    });
  });
}

Answer 3

Answer №2

The image in base64 format is likely already compressed as a jpeg before being encoded. Further compression of this data is not possible.

If you require both high and low quality versions of the image, consider requesting a high-quality (preferably raw pixel) image from the webcam and converting it into jpeg images with varying compression parameters.

If the camera only provides jpeg data, you will need to decompress and recompress it with different parameters, although this process may take longer and result in lower quality.

Ngx-webcam may have limitations for meeting this particular need, so it might be necessary to modify its code to capture images at various quality levels. The captureImageData flag can be used to access raw image data, but the documentation on how to use it effectively may be lacking.

Answer 4

The image in base64 format is likely already compressed as a jpeg before being encoded. Further compression of this data is not possible.

If you require both high and low quality versions of the image, consider requesting a high-quality (preferably raw pixel) image from the webcam and converting it into jpeg images with varying compression parameters.

If the camera only provides jpeg data, you will need to decompress and recompress it with different parameters, although this process may take longer and result in lower quality.

Ngx-webcam may have limitations for meeting this particular need, so it might be necessary to modify its code to capture images at various quality levels. The captureImageData flag can be used to access raw image data, but the documentation on how to use it effectively may be lacking.

What is the best way to reduce the size of a Base64/Binary image in Angular6

Answer №1

Answer №2

Similar questions

Tips on how to showcase various information in distinct tabs using VueJS

The dependencies were not updated after running `npm install`

What is the correct method to properly encode JSON that may include HTML when displaying it in an HTML file?

I am currently struggling with a Typescript issue that I have consulted with several individuals about. While many have found a solution by upgrading their version, unfortunately, it

Mocking multiple services and their constructors in an Angular 2 TypeScript Jasmine test component

Activate the drop-down division when the search box is in focus with xoxco technology

Issue with displaying marker information on Angular Google Maps

What is the best way to invoke a Rest API within a Vue component?

Oh no, an issue has occurred with The Angular Compiler! It appears that TypeScript version 3.9.10 was found instead of the required version, which should be >=3.6.4 and <

Detecting changes in parent ref with Vue's v-modelIs this

Tips for implementing a button redirection to a different page using React

Running a designated AJAX function from a variable by utilizing Applescript

Why are the indicators and controls for Twitter-Bootstrap 5 carousel not functioning properly?

Increasing the variable by 1 in PHP will result in the variable value being incremented to 1

Having trouble uploading a file to Laravel using the jQuery .post method?

Steps to stop mat-spinner upon receiving Job Success/Failure Notification from the backend

Redirect in React Route

Refresh a Particular Section of a Website Without Having to Reload the Entire Page

I'm still searching for a proper solution on how to access JavaScript/jQuery functions within Colorbox

Encountering an issue of receiving "Undefined" while attempting to access constant data from a ReactJS file within my NodeJS