How to export the cropped image

[ahsanaasim]

I can see an export eventEmitter for the cropper. But not sure how to use it. Can you post an example about how to export the cropped image as blob & base64 data?

[matheusdavidson]

Hi there, thank you for posting your question.

You need to follow the readme.md, there is a part showing how to use cropperjs methods:

Using CropperJS methods:

Use @ViewChild in your component to get the element:

In your app.component.html

<angular-cropper #angularCropper ..>

And in your app.component.ts

//
// Import AngularCropperjsComponent
import { AngularCropperjsComponent } from 'angular-cropperjs';

//
// Get with @ViewChild
@ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent;

Then just call the CropperJS method you want:

anywhere in your app.component.ts

//
// Get base64
this.angularCropper.cropper.getCroppedCanvas().toBlob((blob) =>{
    // blob is your base64..
});

[ahsanaasim]

Thanks for the reply.

I tried this code before but getting this error

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

[matheusdavidson]

Are you using checkCrossOrigin? you need to use it otherwise toBlob won't work.

[matheusdavidson]

see this: fengyuanchen/cropper#119

[ahsanaasim]

this is what i used for cropperOptions
this.angularCropper.cropperOptions = { checkCrossOrigin: false, };

[matheusdavidson]

Remove checkCrossOrigin(it default to true), leave the config empty {} for now and it will work

[ahsanaasim]

But problem is my image is coming from a separate domain that. So i needed to set checkCrossOrigin to false;

[ahsanaasim]

I solved the problem by allowing cors from server end. Thanks

[matheusdavidson]

Good to hear, unfortunately that is a security limilation of the browser, not the plugin.

[Coolhat1177]

node_modules/angular-cropperjs/angular-cropperjs"' has no exported member 'AngularCropperjsComponent'. why this error is coming

[matheusdavidson]

@Coolhat1177, please open a new issue with this bug