angular2-img-cropper icon indicating copy to clipboard operation
angular2-img-cropper copied to clipboard

How can i get the cropped file?

Open AmirGilboa opened this issue 7 years ago • 2 comments

in order to use ng2-file-upload to upload the cropped image to server, i need to get hold of the cropped image, and convert it to javascript File object. Any tip on how to do that?

AmirGilboa avatar Dec 06 '17 02:12 AmirGilboa

You can take the cropped image from this.data.image. This will give you the base 64, then you can convert it to blob and then to a file.

webcoderr avatar Dec 21 '17 16:12 webcoderr

I used this code from SO to convert

private convertImageUriToFile(uri: string) {
    const arr = uri.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], this.fileName, { type: mime });
  }

Which I call with .image property this.convertImageUriToFile(this.imageData.image

Nervniyak avatar Jan 13 '20 13:01 Nervniyak