Discussion :

[flamant]

Bonjour,
j'ai un ngx-image-cropper element : (https://www.npmjs.com/package/ngx-image-cropper):

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    <image-cropper
      [imageBase64]="imageFile"
      [maintainAspectRatio]="true"
      [aspectRatio]="aspectRatio"  
      [cropperStaticWidth]="cropperStaticWidth"
      [cropperStaticHeight]="cropperStaticHeight"
      [hideResizeSquares]="true"
      format="png"
      (imageCropped)="imageCropped($event)"
      (imageLoaded)="imageLoaded($event)"
      (cropperReady)="cropperReady()"
      (loadImageFailed)="loadImageFailed()"
    ></image-cropper>

Comme vous pouvez le voir, je charge une image base 64 "imageFile"

Ce que je veux avoir est la largeur de l'image source ("imageFile") sur l'écran. J'ai essayé de l'obtenir à partir de imageLoaded($event), mais $event est indéfini. J'ai essayé aussi de l'obtenir avec le bout de code suivant

Code :

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

1
2
3
4
5
      ngAfterViewInit() {
        const element = $('img.source-image.ng-star-inserted');
        console.log('JQUERY ELEMENT');
        console.log(element);
      }

Mais j'ai l'ouput suivant



J'ai essayé de faire un stackblitz sans pouvoir le faire tourner: https://stackblitz.com/edit/angular-...p.component.ts

[dukoid]

ça serait bien que tu importes le module image-cropper dans app.module.ts
quand on installe un package, il faut l'importer dans son module


c'est écrit dans la doc:
https://www.npmjs.com/package/ngx-image-cropper

Code :

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

1
2
3
4
5
 
  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    console.log(event);
  }

dans: console.log(event);
tu obtiendras les dimensions

[flamant]

Bonjour Dukoi, et merci pour ta réponse
malheuresement, je crois que ce sont les dimensions de l'image croppé et non de l'image source. Je précise que je veux la largeur de l'image source à l'écran

[flamant]

J'ai trouvé le moyen d'avoir cette largeur dans la méthode imageLoaded qui semble se déclencher après ngAfterViewInit()

Code :

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

1
2
3
4
5
6
7
 
    imageLoaded(event: any) {
        const element = $('img.source-image.ng-star-inserted');
        console.log('JQUERY ELEMENT');
        console.log(element);
        console.log(element.width());        
    }

Connaissez vous un autre moyen plus élégant ?

[dukoid]

Code :

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

1
2
3
4
5
6
 
    var img = new Image();
    img.src = this.imageFile;
    img.addEventListener("load", function() {
      console.log(img.width, img.height);
    });

évite d'utiliser jquery dans un projet Angular