在开发 Web 应用程序时，经常需要让用户上传图片。然而，上传大型文件可能会严重影响性能，并导致页面加载缓慢。另外，有时我们需要确保用户上传的图像符合特定的大小限制。那么，在上传前如何检查图像尺寸呢？本文将介绍两种方法：
1. 使用 FileReader API
FileReader API 允许我们读取本地计算机上的文件数据。它还可以帮助我们获取有关文件的元数据，例如名称和大小。下面是一段示例代码，演示如何使用 FileReader API 获取图像的宽度和高度：
-- -------------------- ---- -------
----- --------- - ---------------------------------------------
------------------------------------ ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
---------------------------
------------- - -- -- -
----- --- - --- --------
------- - --------------
---------- - -- -- -
---------------------- ------------
--
--
---在这个示例中，我们首先选中 input[type="file"] 元素。当用户选择文件后，我们使用 FileReader 实例读取文件数据。接下来，我们创建一个新的 Image 对象，并将其源设置为读取器返回的数据 URL。最后，我们通过 onload 回调函数获取图像的宽度和高度。
这种方法简单易用，但在处理大型图像时可能会导致性能问题。此外，它需要加载整个图像，因此可能无法满足某些情况下的需求。
2. 使用 URL.createObjectURL()
另一种方法是使用 URL.createObjectURL() 函数。这个函数可以生成一个指向本地文件的 URL。我们可以将这个 URL 分配给一个新创建的 Image 对象，并在不加载整个图像的情况下获取其尺寸。
-- -------------------- ---- -------
----- --------- - ---------------------------------------------
------------------------------------ ------- -- -
----- ---- - ----------------------
----- ------ - --------------------------
----- --- - --- --------
------- - -------
---------- - -- -- -
---------------------- ------------
----------------------------
--
---在这个示例中，我们首先选中 input[type="file"] 元素。当用户选择文件后，我们使用 URL.createObjectURL() 函数生成一个指向所选文件的 URL。接下来，我们创建一个新的 Image 对象，并将其源设置为该 URL。最后，我们通过 onload 回调函数获取图像的宽度和高度，并使用 URL.revokeObjectURL() 函数释放 URL 对象以减少浏览器内存占用。
与第一种方法相比，URL.createObjectURL() 更快，更节省内存，并且不需要加载整个图像。因此，它是检查图像尺寸的更好选项。
在实际应用中，我们可以将这些方法结合使用，以获得更好的用户体验和性能。例如，在提交表单之前，我们可以检查图像尺寸是否符合要求，并在必要时向用户发出警告。
总之，检查图像尺寸是一项非常有用的技术，可以帮助我们优化 Web 应用程序的性能，提高用户体验。希望本文对您有所帮助！
参考代码：https://codepen.io/chatgpt/pen/WNOyodY
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29542