1

i need to validate a link of a image if it has 1000px x 1000px and jpg.

Exemple:

https://www.w3schools.com/bootstrap/paris.jpg

I have this link, i need to catch the width and height of this image.

The jpg problem i believe that will be easy to do, I'll give a substring in the last few characters, but the question of image size I have no idea how i can find in angular.

Does anyone have any ideas? Thank you.

Renato Veronese
  • 13
  • 1
  • 3
  • Possible duplicate of [Get width height of remote image from url](https://stackoverflow.com/questions/11442712/get-width-height-of-remote-image-from-url) – Christian Benseler Jan 11 '19 at 18:16
  • i need in typescript – Renato Veronese Jan 11 '19 at 18:19
  • is a little different then javascript – Renato Veronese Jan 11 '19 at 18:20
  • Every javascript code is a valid Typescript (as explained here: https://stackoverflow.com/questions/20759532/is-any-javascript-code-a-valid-typescript-code), as long as typescript is transpiled into javascript. – Christian Benseler Jan 11 '19 at 18:22
  • I try: @ViewChild('imgprincipal') imgprincipal My img: When i try to (console.log(this.imgprincipal.nativeElement.offsetWidth) i receive: "Cannot read property 'nativeElement' of undefined – Renato Veronese Jan 11 '19 at 18:30
  • Should't use id to bind via ViewChild, you should use #imgprincipal as explained here https://blog.angular-university.io/angular-viewchild/. You definitely should take a better look at how Angular and Typescript works. – Christian Benseler Jan 11 '19 at 18:40

3 Answers3

5

Here is the javascript way : 

function getImageDimenstion(imgUrl){

   let img = new Image(); 

   img.src = imgUrl;
   img.onload = function (event) {
        let  loadedImage = event.currentTarget;
        let width = loadedImage.width;
        let height = loadedImage.height;
        console.log('height: '+height);
        console.log('width: '+width);
   } 
}

const url= "https://www.w3schools.com/bootstrap/paris.jpg";
getImageDimenstion(url);

working example for angular :

Working Demo

Ani Naslyan
  • 134
  • 2
  • 15
programoholic
  • 4,830
  • 5
  • 20
  • 59
  • 1
    how can i catch this width/height in a typescript variable? – Renato Veronese Jan 11 '19 at 19:18
  • if i try this.width = width i receive: "[ts] Property 'width' does not exist on type 'HTMLElement'. – Renato Veronese Jan 11 '19 at 19:19
  • 1
    Late but typescript will agree with this: `let loadedImage = event.currentTarget as HTMLImageElement;`. Then, you can access all the [HTMLImageElement properties](https://developer.mozilla.org/es/docs/Web/API/HTMLImageElement) like `loadedImage.width` – Marcos R Jan 28 '20 at 08:58
1

Thought I'd share my solution to this issue as I was hung up by not being able to access the image height and width outside of the callback function given in others' solutions. Here's the solution that worked for me:

let img = new Image();
img.src = "https://yourImageSource";

Now, if you want to use the image height/width, just use img.naturalHeight and img.naturalWidth.

NOTE: works in modern browsers in my Angular project.

Kevin H.
  • 36
  • 3
0

create a directive and use that as below:

import { Directive,ElementRef,Renderer} from '@angular/core';

@Directive({
  selector:"[imgDimension]",
  host:{
    '(click)':"calculate()"
  }
})

export class GetImageDmnsn{ 

  constructor(private img:ElementRef){

  }
  calculate(){
    console.log('height:' + this.img.nativeElement.offsetHeight);
    console.log('width:' + this.img.nativeElement.offsetWidth);   
  }
}
<img imgDimension [src]="source">
MKJ
  • 120
  • 8