使用Angular JS通过URL读取图像时获取null

Question

我有一个网址，例如：w3schools图片。当我尝试读取图像并计算其宽度和高度时，我在img.src=imgData处变为空。 这是我正在尝试的代码。为什么我无法从此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;
}

Answer 1

您也可以尝试使用clientwidth和clientheight。

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

Answer 2

您可以在图片元素上使用naturalHeight和naturalWidth。像这样：

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