How to compress Base64/Binary image in Angular6?

Question

I used Ngx-Webcam for capture image from camera. I want to get both high quality and low quality image from camera

This library return to me Base64 image. It have an option to reduce size imageQuality but I can't use because I need high both quality image and low quality image

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 try to apply https://www.npmjs.com/package/image-conversion for our problem,

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);

But it was not work. I want to find another solution for compress image

Answer 1

The base64 image was most likely already compressed (jpeg) before it was encoded in base64. You can't further compress such data.

If you need both high and low quality of the image, you should request a high quality (preferrably raw pixels) image from the webcam and transform it into jpeg images with different compression parameters.

If the camera only returns jpeg data, you need to decompress before recompressing with different parameters, which is possible but will consume more time and result in worse quality.

Ngx-webcam is probably a little limiting for this requirement, it might be necessary to look at its code and extend it somewhat to return captured images at different quality levels. There's a captureImageData flag that can be used to retrieve raw image data, but the documentation is a bit thin on how to work with that.

Answer 2

I found how to compress image with 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;

  // paint snapshot image to 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);
      // read canvas content as image
      const mimeType: string = webcamImage.mineType;
      const dataUrl: string = _canvas.toDataURL(mimeType, quality);
      observe.next(dataUrl);
    });
  });
}