title: Image compression in image upload in angular4
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>save(event: any, type, image_type) {
    this.uploadImageFlag = true;
     const fileList: FileList = event.target.files;
      if (fileList.length &gt; 0) {
          const file: File = fileList[0]
          this.files.set('files', file, file.name)
          const reader = new FileReader();
          reader.onload = (event: any) =&gt; {
          this.url2 = event.target.result;
          this.upload = true;
          }
          reader.readAsDataURL(event.target.files[0]);
  
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"&gt;&lt;/script&gt;
  &lt;input id="input"  type="file" accept="image/*" style=" width: 180px;" #files (change)="save($event)" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>