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

Question

我用于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);

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

Answer 1

我找到了如何用画布压缩图像compress(webcamImage: WebcamImage, quality: number): Observable<string> {&nbsp; let _canvas = this.canvas;&nbsp; let width = webcamImage.width;&nbsp; let height = webcamImage.height;&nbsp; _canvas.width = width;&nbsp; _canvas.height = height;&nbsp; // paint snapshot image to canvas&nbsp; const img = new Image();&nbsp; img.src = webcamImage.imageAsDataUrl;&nbsp; return Observable.create(observe => {&nbsp; &nbsp; (img.onload = () => {&nbsp; &nbsp; &nbsp; const context2d = _canvas.getContext('2d');&nbsp; &nbsp; &nbsp; context2d.drawImage(img, 0, 0, width, height);&nbsp; &nbsp; &nbsp; // read canvas content as image&nbsp; &nbsp; &nbsp; const mimeType: string = webcamImage.mineType;&nbsp; &nbsp; &nbsp; const dataUrl: string = _canvas.toDataURL(mimeType, quality);&nbsp; &nbsp; &nbsp; observe.next(dataUrl);&nbsp; &nbsp; });&nbsp; });}

Answer 2

base64 图像很可能在以 base64 编码之前已经被压缩 (jpeg)。您无法进一步压缩此类数据。如果您需要高质量和低质量的图像，您应该从网络摄像头请求高质量（最好是原始像素）图像并将其转换为具有不同压缩参数的 jpeg 图像。如果相机只返回jpeg数据，需要先解压再用不同的参数重新压缩，这是可能的，但会消耗更多的时间，导致质量更差。Ngx-webcam 可能对此要求有一些限制，可能需要查看其代码并对其进行一些扩展以返回不同质量级别的捕获图像。有一个captureImageData标志可用于检索原始图像数据，但有关如何使用它的文档有点少。