在前端开发中，我们经常需要处理图像文件。而有时候我们需要获取图像文件的大小和尺寸，以便进行后续的操作，例如：展示合适大小的图像、压缩图像等等。本文将介绍如何使用 Javascript 来获取图像文件的大小和尺寸，并提供实用的代码示例。
获取图像文件大小
要获取图像文件的大小，我们可以使用 File 对象的 size 属性。File 对象代表文件，通常是通过 input[type=file] 元素获取到的。
----- --------- - ------------------------------------------ ------------------------------------ -- -- - ----- ---- - ------------------ ---------------------- -- ------ --
以上代码监听了 input[type=file] 元素的 change 事件，在事件回调函数中获取了选择的文件对象，并输出了其大小。需要注意的是，size 属性返回的是字节（byte）为单位的文件大小。
获取图像文件尺寸
要获取图像文件的尺寸，我们需要先创建一个 Image 对象，并将要读取的图像文件赋值给它的 src 属性。然后，当图像加载完成后，我们可以访问 Image 对象的 width 和 height 属性来获取图像文件的尺寸。
----- --- - --- ------- ---------- - -- -- - ------------------- ------------- ------- --------------- - ------- - -------------------
以上代码创建了一个 Image 对象，并使用其 onload 事件监听器，在图像加载完成后输出了图像文件的尺寸。需要注意的是，由于图像加载是一个异步操作，因此我们需要在监听器中访问 Image 对象的 width 和 height 属性。
另外，如果要获取当前页面上某个 <img> 元素的尺寸，我们可以直接访问该元素的 naturalWidth 和 naturalHeight 属性。
---- ----------------------- -----------
----- ----- - -------------------------------- ------------------- ---------------------- ------- ------------------------
以上代码获取了 <img> 元素的 naturalWidth 和 naturalHeight 属性，并输出了图像文件的尺寸。
获取图像文件大小和尺寸
要同时获取图像文件的大小和尺寸，我们可以结合以上两种方法，先获取文件大小，再使用 Image 对象获取文件尺寸。
----- --------- - ------------------------------------------
------------------------------------ -- -- -
----- ---- - ------------------
----------------------
----- --- - --- -------
---------- - -- -- -
------------------- ------------- ------- ---------------
-
------- - -------------------------
--以上代码在获取文件大小后，创建了一个 Image 对象，并使用 URL.createObjectURL() 方法为其赋值，然后在图像加载完成后输出了图像文件的尺寸。需要注意的是，由于我们使用了 URL.createObjectURL() 方法，因此我们不需要将图像文件上传到服务器来获取其尺寸。
总结
本文介绍了如何使用 Javascript 获取图像文件的大小和尺寸，并提供了实用的代码示例。通过本文的学习，我们可以更好地处理图像文件，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25919