5

save(event: any, type, image_type) {
  this.uploadImageFlag = true;
   const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
        const file: File = fileList[0]
        this.files.set('files', file, file.name)
        const reader = new FileReader();
        reader.onload = (event: any) => {
        this.url2 = event.target.result;
        this.upload = true;
        }
        reader.readAsDataURL(event.target.files[0]);

    }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<input id="input"  type="file" accept="image/*" style=" width: 180px;" #files (change)="save($event)" />

I am using the below function for uploading image and sending it to backend. The problem is the image size is quite big which takes time to reach to backend. I have seen many examples on how to compress image but I dont really want to change my existing code and revamp the module so can someone please tell me how I can change this function and compress the image.

Pragya Sharma
  • 71
  • 1
  • 1
  • 8

3 Answers3

5

I made this library for what you need: https://www.npmjs.com/package/ngx-image-compress

You have a complete sample on the read-me page. Here a snippet if you want a idea of how you can use it:


@Component({...})
export class AppComponent {

  constructor(private imageCompress: NgxImageCompressService) {}

  compressFile() {

    this.imageCompress.uploadFile().then(({image, orientation}) => {

      console.warn('Size before:', this.imageCompress.byteCount(result));

      this.imageCompress.compressFile(image, orientation, 50, 50).then(

        result => console.warn('Size after:', this.imageCompress.byteCount(result));

      );
    });

  }
}
David Faure
  • 1,336
  • 14
  • 25
0

there many 3 party module for this, not sure about compressing an image but you can able to resize the image with canvas and export the same image using its dataURI

as stated here you can have a look here also here is a basic tutorial

Hrishikesh Kale
  • 6,140
  • 4
  • 18
  • 27
  • I have a very complex code and I dont want to go through revamping the whole component. If the 3rd party module can help me with this please share it. Also I am quite confused is resizing same as compressing? – Pragya Sharma Mar 23 '18 at 05:08
  • you can check this https://www.npmjs.com/package/ng2-img-max photo compression and photo resizing are 2 completely different things. When compressing a photo (jpg), you keep the same image size, that is width and heigth in pixels won't change, but you get a smaller file size in kilobytes by losing quality (think about it like bluring small details). When resizing a photo, the resulting image size in pixels is different, mostly smaller, but it could be bigger. – Hrishikesh Kale Mar 23 '18 at 05:18
0

Follow the below tutorial to achieve the goal of compression

https://medium.com/@coolchoudharyvijay/compress-image-and-send-it-to-an-api-in-angular-bc48e6ed3835

V_for_Vj
  • 849
  • 1
  • 12
  • 30