title: Send image data with FormData as a png file
body: <p>I use <code>angular2-img-cropper</code> and given a cropped image in data url format I would like to convert it to a PNG file and send it to the server:</p>
  
  <pre class="lang-js prettyprint-override"><code>cropped(bounds: Bounds) {
    // convert this.data.image to a PNG file
    // send it to the server with form data
  }
  
  fileChangeListener($event) {
    const image: any = new Image();
    const file: File = $event.target.files[0];
    const myReader: FileReader = new FileReader();
    const that = this;
    myReader.onloadend = function (loadEvent: any) {
      image.src = loadEvent.target.result;
      that.cropper.setImage(image);
    };
    myReader.readAsDataURL(file);
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img-cropper #cropper (onCrop)="cropped($event)" [image]="data" [settings]="cropperSettings"&gt;&lt;/img-cropper&gt;
  </code></pre>