CODEWITHSUNDEEP
angularimagefileblobnode-modules
nipun-kavishka
nipun-kavishka

Reputation: 922

Return File from ngx-image-cropper to upload - Angular

I am using ngx-image-cropper to crop my image. I need to retrieve the cropped image from ngx-image-cropper to upload. However, I can't retrieve File object through this.

This is the code that I used to trigger when the user crop the image,

imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    this.cropperHeight = event.height;
    this.cropperWidth = event.width;
    this.croppedEvent =event.file;//This is how i tried to get file
}

When I am trying to upload the file it has some error. So it is better to provide a way to get file object from ngx-image-cropper

Upvotes: 7

Views: 12639

Answers (5)

Mohamed Ashique Ar-Rasool
Mohamed Ashique Ar-Rasool

Reputation: 53

import { ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';

export class YourComponent {
    imageChangedEvent: any = '';
    croppedImage: any = '';
    
    constructor(
      private sanitizer: DomSanitizer
    ) {
    }

    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
      this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);
      // event.blob can be used to upload the cropped image
    }
    imageLoaded(image: LoadedImage) {
        // show cropper
    }
    cropperReady() {
        // cropper ready
    }
    loadImageFailed() {
        // show message
    }
}

source: https://github.com/Mawi137/ngx-image-cropper/releases/tag/7.0.0

Upvotes: 0

EAlino
EAlino

Reputation: 1

for ^1.5.1 version:

imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    const file_image: File = this.imageChangedEvent.target.files[0]; //The change event from your file input (set to null to reset the cropper)
    const file = new File([event.file], file_image.name, {type: file_image.type});

    console.log("file", file);
}

Upvotes: 0

Martín Rodríguez
Martín Rodríguez

Reputation: 7

I solved sending the original file to the function and creating a new File instance on image-cropper crop( originalFile: File ) function:

import { ImageCroppedEvent, base64ToFile } from 'ngx-image-cropper';
...
crop(originalFile): File {
   ...
   ...
   output.base64 = this.cropToBase64(cropCanvas);
   if(originalFile){
     const file = new File([base64ToFile(output.base64)], originalFile.name, {lastModified: originalFile.lastModified, type: originalFile.type});
     return file;
   }
}

Upvotes: 0

Kelvin Menegasse
Kelvin Menegasse

Reputation: 106

To return the cropped image as a file instead of a base64 string, add the following:


import { ImageCroppedEvent, base64ToFile } from 'ngx-image-cropper';

  imageCropped(event: ImageCroppedEvent) {
    // Preview
    this.croppedImage = event.base64;

    const fileToReturn = this.base64ToFile(
      event.base64,
      this.data.imageChangedEvent.target.files[0].name,
    )

    return fileToReturn;
  }


  base64ToFile(data, filename) {

    const arr = data.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);

    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }

    return new File([u8arr], filename, { type: mime });
  }

Upvotes: 9

mentamarindo
mentamarindo

Reputation: 647

The package includes the method base64ToFile

// Import the method:

import { ImageCroppedEvent, base64ToFile } from 'ngx-image-cropper';

.....
imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    let File = base64ToFile(this.croppedImage);
}

source: https://github.com/Mawi137/ngx-image-cropper/releases/tag/3.0.0

Upvotes: 29

Related Questions