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

我使用了

Ngx网络摄像头

从相机上拍摄图像。我想从相机上获得高质量和低质量的图像

此库返回给我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);
}

let data=webcamImage.imageAsBase64；
const raw=window.atob（数据）；
const rawLength=原始长度；
const unit8array=新的Uint8Array（新的ArrayBuffer（rawLength））；
for（设i=0；i

我试图解决我们的问题

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

let data=webcamImage.imageAsBase64；
const raw=window.atob（数据）；
让contentType=raw.split（“；”）[0]；
const rawLength=原始长度；
const unit8array=新的Uint8Array（新的ArrayBuffer（rawLength））；
for（设i=0；i

---

但这不是工作。我想找到另一种压缩图像的解决方案。base64图像很可能在编码到base64之前已经被压缩（jpeg）。您无法进一步压缩此类数据

如果您需要高质量和低质量的图像，您应该从网络摄像头请求高质量（最好是原始像素）图像，并将其转换为具有不同压缩参数的jpeg图像

如果相机仅返回jpeg数据，则需要先解压缩，然后再使用不同的参数重新压缩，这是可能的，但会占用更多时间并导致质量下降

---

Ngx网络摄像头可能对这一要求有点限制，可能需要查看其代码并对其进行一些扩展，以返回不同质量级别的捕获图像。有一个

captureImageData

标志可用于检索原始图像数据，但关于如何使用它的文档有点少。

我找到了如何使用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);
    });
  });
}

compress（webcamImage:webcamImage，质量：number）：可观察{
让_canvas=this.canvas；
让宽度=webcamImage.width；
让高度=webcamImage.height；
_画布宽度=宽度；
_canvas.height=高度；
//将快照图像绘制到画布
const img=新图像（）；
img.src=webcamImage.imageAsDataUrl；
返回可观察的。创建（观察=>{
（img.onload=（）=>{
const context2d=_canvas.getContext（'2d'）；
绘图图像（img，0，0，宽度，高度）；
//以图像形式读取画布内容
const mimeType:string=webcamImage.mineType；
const dataUrl:string=\u canvas.toDataURL（mimeType，quality）；
下一步（dataUrl）；
});
});
}

错误消息指向了异步的方向，而不是预期的方向（很可能是某个URL具有意外的格式）。但是您显示的代码没有任何异步处理。此外，错误消息还涉及一个名为

dataURLtoImage

的函数，该函数在代码示例中不存在。请尝试提供有关错误消息的更多上下文。这是我尝试的唯一解决方案。但我的问题是如何压缩Base64/二进制图像。是的，我明白这一点，我只是指出错误消息可能与您的问题无关，或者如果您删除了该错误消息，您的代码可能已经完成了预期的操作。“它不工作”是什么意思？它没有像你想要的那样压缩吗？它产生了一个破碎的图像吗？它抛出错误了吗？在使用不同的参数重新压缩之前，你能和我分享一下解压缩

使用的库吗？@khacsinhcs抱歉，这只是一个一般的想法，我对JavaScript库不太熟悉。您已经尝试使用的图像转换库可能具有您所需的一切。