如何从远程 url js 获取 img 尺寸 - Javascript

当你需要获取一个远程 url 上的图片尺寸时，你可以使用一些 JavaScript 技巧。

方法一：使用 Image 对象

你可以创建一个 Image 对象，将远程 url 赋值给它的 src 属性，然后在 load 事件触发后获取其宽度和高度。

let imgUrl = 'https://example.com/image.jpg';
let img = new Image();
img.src = imgUrl;
img.onload = function() {
  console.log(img.width, img.height);
};

这样可以确保图像加载了，因为 width 和 height 只有在图像加载后才能正确计算。如果你想要提取图像并对其进行操作，这是一种非常有用的方式。

方法二：使用 XMLHttpRequest

如果你不想将图片加载到浏览器中，可以使用 XMLHttpRequest。使用 XMLHttpRequest 加载图片并将返回的二进制数据传递给一个 Blob 对象，然后创建一个新的 Image 对象并将其 src 属性设置为 Blob 的 URL，这样就可以访问该图像的所有数据。

let oReq = new XMLHttpRequest();
oReq.open('GET', imgUrl, true);
oReq.responseType = 'blob';

oReq.onload = function() {
   let blob = new Blob([oReq.response], {type: 'image/jpeg'});
   let url = URL.createObjectURL(blob);
   let img = new Image();
   img.onload = function() {
     console.log(img.width, img.height);
     URL.revokeObjectURL(url);
   };
   img.src = url;
};
oReq.send();

当然这也意味着你需要多做几个步骤，但这条路在某些情况下可能更实用。

总结

这些方法都可以使用 JavaScript 轻松地获取远程 url 上图片的尺寸。它们各具优点和缺点，取决于你的使用情况和环境需求。