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

Question

我有一个 URL，例如：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;
}