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

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.

it looks like that this code is just getting an image from the server. Where is your code of resizing? — StepUp
– StepUp, Commented May 25, 2020 at 8:28
Thanks for reply @StepUp. It is. I found a few solutions using angular JS, and after researching I found another solution using a library beside. I wrote this post hoping someone can give any clue. — Kenzo_Gilead
– Kenzo_Gilead, Commented May 25, 2020 at 8:29
image resizing can mean different things, you should be very specific. You only want to reduce height and width or you are talking about compressing in terms of resolutiion. In the code above you are only making a url. For width height normal css in template will do. For resolution better go for a library then writing the whole stuff again by yourself. — Aakash Garg
– Aakash Garg, Commented May 25, 2020 at 8:32
Thanks @AakashGarg. I am looking basically obtain less size of the file. — Kenzo_Gilead
– Kenzo_Gilead, Commented May 25, 2020 at 8:33
Hello @EliasMP please refer to my answer below if you want to do it without library. — Aakash Garg
– Aakash Garg, Commented May 25, 2020 at 8:43

StepUp · Accepted Answer · 2020-05-25 09:08:00Z

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.

edited May 25, 2020 at 9:08

answered May 25, 2020 at 8:33

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Kenzo_Gilead Over a year ago

Could avoid of using additional package? (just asking)

StepUp Over a year ago

@EliasMP please, see my updated answer

Kenzo_Gilead Over a year ago

This part is typescript? const canvas = document.createElement('canvas');

StepUp Over a year ago

@EliasMP you can change this code to Angular version and use ViewChild and go further.

StepUp Over a year ago

@EliasMP I've added less verbose example to my reply. Please, see my udapted answer. Thanks.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related