Discussion :

[flamant]

J'essaye d'implémenter un cropper avec cropperjs

Voici le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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