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

[krakatoa]

https://github.com/nani6666/angular-cropperjs

[flamant]

Bonjour Krakatoa, merci
je n'arrive pas à faire fonctionner ta demo, peux tu me dire comment s'y prendre ? Voici le print screen

[krakatoa]

fonctionne pas

voici la bonne version:
https://stackblitz.com/edit/angular-...example-xs1dm7

tu verras dans la console, tu obtiens la base64 de l'image




astuces:
n'hésite pas à aller sur github et sur stackblitz et rechercher: angular cropper
ou pour d'autres recherches

il y a bien souvent des exemples qui tournent, faut bien sur voir en premier les sources les plus récentes dans les dernière version du framework !

tu peux trouver des exemples sur tous les sujets, c'est très formateur !

[flamant]

je ne sais pas pourquoi mais je n'ai pas la bonne version de stackblitz pour faire tourner l'exemple. Il y a une croix sur l'url de la partie d'affichage et quand je clique dans l'url, rien ne s'affiche . Voici le print screen

[krakatoa]

justement l'avantage de stackblitz est de le faire tourner dans n'importe que lenvironnement
il n'y a pas de lien avec le systeme d'exploitatation etc...


essaye sur un autre navigateur
j'ai encore regardé et je confirme que ça fonctionne trés bien chez moi sur mes 2 PC


donc tu peux reporter la façon de faire sur ton code...