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.

it looks like that this code is just getting an image from the server. Where is your code of resizing? — StepUp, May 25 '20 at 08: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. — Elias MP, May 25 '20 at 08: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, May 25 '20 at 08:32
Thanks @AakashGarg. I am looking basically obtain less size of the file. — Elias MP, May 25 '20 at 08:33
Hello @EliasMP please refer to my answer below if you want to do it without library. — Aakash Garg, May 25 '20 at 08:43
@EliasMP checked out my answer? if it worked for you, please mark it as answer. — Aakash Garg, May 25 '20 at 08:47
@EliasMP: All JS functions are available in TS. There is no typescript specific lib to achieve what you want — David, May 25 '20 at 09:27
@David I didnt know. So if you want to resize an image in ionic must to use JS? Well, I dont have idea what I will do but Thanks :) — Elias MP, May 25 '20 at 09:30

StepUp · Accepted Answer · 2020-05-25T09:08:00.470

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 '20 at 09:08

answered May 25 '20 at 08:33

StepUp

27,357
12
66
120

Could avoid of using additional package? (just asking) – Elias MP May 25 '20 at 08:35
@EliasMP please, see my updated answer – StepUp May 25 '20 at 08:49
This part is typescript? const canvas = document.createElement('canvas'); – Elias MP May 25 '20 at 08:55
@EliasMP you can change this code to Angular version and use `ViewChild` and go further. – StepUp May 25 '20 at 09:01
@EliasMP I've added less verbose example to my reply. Please, see my udapted answer. Thanks. – StepUp May 25 '20 at 09:08
Quite lost now, I can´t find your updated answers without use JS. Sorry... – Elias MP May 25 '20 at 09:13
@EliasMP read from this *Moreover, *. You can convert JavaScript to TypeScript. TypeScript is a JavaScript but with more features. – StepUp May 25 '20 at 09:24
@StepUp- You hace to understand I am quite newbie in angular and ionic. I receive a small introduction of them and then start code. No idea of JS. I will try it but it doesnt look like I will go to good port. Thanks anyway :) – Elias MP May 25 '20 at 09:27

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

1 Answers1