Obtenir la largeur sur l'écran de l'image source d'un élément ngx-image-cropper

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

Code:

---

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:

---

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

Pièce jointe 585422

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

ç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:

---

1 2 3 4 5

imageCropped(event: ImageCroppedEvent) { this.croppedImage = event.base64; console.log(event); }

---

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

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

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

Code:

---

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 ?

Code:

---

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