在前端开发中，有时需要从远程URL获取图片的宽度和高度等信息，以便进行布局等操作。本文将介绍如何使用JavaScript获取远程图像的宽度和高度。
获取方式
- 使用Image对象
在JavaScript中，可以使用Image对象来获取远程图片的宽度和高度，具体实现代码如下：
const img = new Image();
img.src = 'https://example.com/image.jpg';
img.onload = function() {
console.log('width:', this.width);
console.log('height:', this.height);
};上述代码创建一个新的Image对象，并通过设置src属性指定远程图片的URL。当图片加载完成后，会自动触发onload事件，此时可以获取到图片的宽度和高度。
- 使用fetch API
另一种获取远程图片宽度和高度的方式是使用fetch API，具体实现代码如下：
-- -------------------- ---- -------
--------------------------------------
-------------- -- ----------------
---------- -- -
----- --- - --------------------------
----- --- - --- --------
------- - ----
---------- - ---------- -
--------------------- ------------
---------------------- -------------
-------------------------
--
---上述代码使用fetch API获取图片的二进制数据，并转换为Blob对象。然后使用createObjectURL方法创建一个临时URL，再将临时URL赋值给Image对象的src属性。当图片加载完成后，同样可以获取到宽度和高度。
注意事项
- 需要注意的是，使用上述方法获取图片的宽度和高度需要等待图片加载完成，因此建议在页面其他内容加载完成后再进行操作。
- 在使用fetch API时，由于创建了临时URL，需要通过URL.revokeObjectURL方法释放资源，避免内存泄漏。
结语
本文介绍了从远程URL获取远程图像的宽度和高度的两种方式，并给出了相应的实现代码。希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24578