javascript - 如何从 URL 显示图像分辨率

Question

我正在创建一个网站来共享可以下载并在用户桌面上使用的壁纸。但我无法找到一种方法向我的访客展示其解决方案。是的，我可以自己写分辨率，但问题是我共享的图像太多，我不可能为每个图像写分辨率。

我能够自动创建描述，但我想显示图像分辨率。

用 JavaScript 可以实现这一点吗？如果图像加载后显示结果就没有问题。

Answer 1

您可以在 JavaScript 中将其创建为 img 元素，而无需将其呈现在页面上:

var img = document.createElement('img');

img.src = "path_to_src";

现在您的图像已创建，您可以使用 img.height 和 img.width 拉动高度和宽度，它们在图像加载后获取:

var x = document.createElement('img');

x.src = "http://placehold.it/128x256";

x.onload = function() {
  var html = "";
  
  html += "Height = " + x.height + "px<br>";
  html += "Width = " + x.width + "px";
  
  document.querySelector('p').innerHTML = html;
}

<p>
    <!-- Image height and width will be displayed here instead of the below text. -->
    Creating image and pulling its height and width...
</p>