1

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.

Kenzo_Gilead
  • 2,187
  • 9
  • 35
  • 60
  • 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
  • 1
    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 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. – Kenzo_Gilead 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 :) – Kenzo_Gilead May 25 '20 at 09:30

1 Answers1

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.

StepUp
  • 36,391
  • 15
  • 88
  • 148