1 pièce(s) jointe(s)
Implémentation de Cropper.js qui n'est pas affichée
J'essaye d'implémenter un cropper avec cropperjs
Voici le html
Code:
1
2
3
4
| <div mat-dialog-container>
<img id="image" #image [attr.src]="localUrl" crossorigin>
</div>
<img [attr.src]="imageDestination"> |
voici comment j'initialise l'image source
Code:
1
2
3
4
5
| var reader = new FileReader();
reader.onload = (event: any) => {
this.localUrl = event.target.result;
}
reader.readAsDataURL(instance of javascript File); |
localUrl est l'url base64 d'une image que j'ai uploadé en local
voici comment j'initialise l'objet Cropper
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| @ViewChild("image", { static: false })
public imageElement: ElementRef;
public imageDestination: string;
private cropper: Cropper;
ngAfterViewInit() {
this.cropper = new Cropper(this.imageElement.nativeElement, {
zoomable: false,
scalable: false,
checkCrossOrigin: true,
aspectRatio:1,
crop: () => {
const canvas = this.cropper.getCroppedCanvas();
this.imageDestination = canvas.toDataURL("image/png");
}
});
} |
Mais la fenêtre du cropper n'apparait pas ainsi que l'image destination
Voici le log de l'objet Cropper
Pièce jointe 583866
