replace() didn't work

[cihad]

When I run:

this.angularCropper.cropper.replace(imageUrl)

image has changed. But when I run:

this.angularCropper.cropper.getCroppedCanvas().toDataURL("image/jpeg");

I got this error:

AppComponent.html:7 ERROR TypeError: Cannot read property 'toDataURL' of null

It means getCroppedCanvas() returns null.

Thanks.

[matheusdavidson]

I'll make a test, give me a moment.

[matheusdavidson]

i have confirmed the problem with the replace method, will need more time to find a fix. What you could do in the meantime is destroy angular-cropper html with ngIf, change the image and place the element again. Thats the way i do in https://github.com/matheusdavidson/angular-upcrop

[cihad]

Thank you for your interest. I will try.

[mariuszr2404]

This is still bug? Exist some way to avoid this problem?

[DanielEberl]

onFileAdded(event){

const angularCropper = this.angularCropper;

const input = event.target;

  if (input.files && input.files[0]) {
    const reader = new FileReader();

    reader.onload = function (e) {
      **angularCropper.cropper.destroy();
      angularCropper.imageUrl = e.target.result;**
    };
    reader.readAsDataURL(input.files[0]);
  }

}

This is my solution for now, hope it stays stable. When I do replace, it creates another instance below the existing one.

[m-ghaoui]

This seems to work for me:

readFile(file: File) {
const myReader = new FileReader();

myReader.onloadend = (loadEvent: any) => {
    this.angularCropper.imageUrl = loadEvent.target.result;

    this.angularCropper.cropper.destroy();
};

myReader.readAsDataURL(file);
}

Am I doing this right? The call to .destroy() reloads the cropper.

If I look at the source code of https://fengyuanchen.github.io/cropperjs/ I see this:

if (/^image\/\w+/.test(file.type)) {
    uploadedImageType = file.type;
    uploadedImageName = file.name;

    if (uploadedImageURL) {
    URL.revokeObjectURL(uploadedImageURL);
    }

    image.src = uploadedImageURL = URL.createObjectURL(file);
    cropper.destroy();
    cropper = new Cropper(image, options);
    inputImage.value = null;
} else {
    window.alert('Please choose an image file.');
}

As you can see, a new Cropper gets created after the old one is destroyed.

So my question is: is calling .destroy() enough? It works perfectly BTW

[vivekdoshi2]

Found Solution :

All we need is to call destroy();

this.angularCropper.cropper.destroy();

Demo : https://stackblitz.com/edit/angular-cropperjs-replace-demo

[MaccabeeY]

This may not be an issue with this library but with cropperjs itself, see: https://github.com/fengyuanchen/cropperjs/issues/617