Code/Resize massive image in Base64 using ionic or angular9 (NOT using Javascript)

Question

I am getting an massive image in ionic,so I need to code or resize it. I am quite lost... is it possible? My code so far is:

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

Used languages must to be Ionic or Angular. (NOT using Javascript) Thanks you all.

Answer 1

Try to use use ng2-img-cropper to resize the image before uploading. In addition, you can customize dimension.

You can install the package named as ng2-img-cropper:

npm install ng2-img-cropper --save

You can read more about ng2-img-cropper here

If you want to avoid additional packages, then you can use this TypeScript version of image resizing.

Moreover, there is a little bit simplier example. However, you also need to create somewhere canvas and you can use ViewChild to work with it.