使用ionic或angular9（不使用Javascript）在Base64中编码/调整大量图像[重复]

Question

这个问题在这里已经有了答案：

如何在浏览器中通过 Javascript 压缩图像？ (10 个回答)

去年关闭。

我在ionic中获得了大量图像，因此我需要对其进行编码或调整大小。 我很迷茫……这可能吗？ 到目前为止，我的代码是：

base64 = 'data:image/jpeg;base64, ';
defaultAvatar = './assets/img/resources/img-avatar.png';

if (this.staffService.getStaff() === null) {
      this.staffService.staffInfo().subscribe(data => {
        this.staffData = this.staffService.mapStaffData(data);
        this.avatar_imagen = this.staffData.image ?
          this.domSanitizer.bypassSecurityTrustResourceUrl(
            this.base64 + this.staffData.image
          )
          : this.defaultAvatar;
      });
    } else {
      this.staffData = this.staffService.getStaff();
      this.avatar_imagen = this.staffData.image ?
        this.domSanitizer.bypassSecurityTrustResourceUrl(
          this.base64 + this.staffData.image
        )
        : this.defaultAvatar;
    }

使用的语言必须是Ionic或Angular 。 （不使用Javascript ）谢谢大家。

Answer 1

在上传之前尝试使用ng2-img-cropper调整图像大小。 此外，您可以自定义维度。

您可以安装名为ng2-img-cropper ：

npm install ng2-img-cropper --save

您可以在此处阅读有关 ng2-img-cropper 的更多信息

如果你想避免额外的包，那么你可以使用这个 TypeScript 版本的图像调整。

此外， 还有一个更简单的例子。 但是，您还需要在某处创建 canvas 并且您可以使用ViewChild来处理它。