如何在Angular6中压缩Base64 /二进制图像？

哈钦奇

我用来Ngx-Webcam从相机捕获图像。我想从相机获得高质量和低质量的图像

该库返回给我Base64映像。它具有减小尺寸的选项，imageQuality但我无法使用，因为我同时需要高质量的图像和低质量的图像

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

我尝试针对我们的问题应用https://www.npmjs.com/package/image-conversion，

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

但这是行不通的。我想找到另一个压缩图像的解决方案

哈钦奇

我发现了如何用画布压缩图像

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。