Getting null while reading image through URL using Angular JS

Question

I have an URL, for eg: w3schools image. When I try to read image and calculate its width and height, I'm getting null at img.src=imgData. This is the code I'm trying.Why I'm not able to read image from this URL.

var imgData = https://www.w3schools.com/w3css/img_fjords.jpg;
img.src = imgData;
img.onload = function () {
  $rootScope.width = this.width;
  $rootScope.height = this.height;
}

Possible duplicate of [How to get image size (height & width) using JavaScript?](https://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) — Nikolaj Dam Larsen, Nov 17 '17 at 07:56

score 2 · Answer 1 · answered Nov 17 '17 at 08:08

You can try clientwidth and clientheight as well .

var imgData = https://www.w3schools.com/w3css/img_fjords.jpg;
    img.src = imgData;
    img.onload = function () {
       $rootScope.width = this.clientWidth;;
       $rootScope.height = this.clientHeight;
    }

score 0 · Answer 2 · answered Nov 17 '17 at 07:56

You can use naturalHeight and naturalWidth on the image element. Like this:

var imgData = https://www.w3schools.com/w3css/img_fjords.jpg;
img.src = imgData;
img.onload = function () {
   $rootScope.width = this.naturalWidth;
   $rootScope.height = this.naturalHeight;
}

Getting null while reading image through URL using Angular JS

2 Answers2