用 Javascript 如何确定图像文件大小和尺寸？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理图像文件。而有时候我们需要获取图像文件的大小和尺寸，以便进行后续的操作，例如：展示合适大小的图像、压缩图像等等。本文将介绍如何使用 Javascript 来获取图像文件的大小和尺寸，并提供实用的代码示例。

获取图像文件大小

要获取图像文件的大小，我们可以使用 File 对象的 size 属性。File 对象代表文件，通常是通过 input[type=file] 元素获取到的。

const fileInput = document.querySelector('input[type=file]')

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0]
  console.log(file.size) // 输出文件大小
})

以上代码监听了 input[type=file] 元素的 change 事件，在事件回调函数中获取了选择的文件对象，并输出了其大小。需要注意的是，size 属性返回的是字节（byte）为单位的文件大小。

获取图像文件尺寸

要获取图像文件的尺寸，我们需要先创建一个 Image 对象，并将要读取的图像文件赋值给它的 src 属性。然后，当图像加载完成后，我们可以访问 Image 对象的 width 和 height 属性来获取图像文件的尺寸。

const img = new Image()

img.onload = () => {
  console.log(`width: ${img.width}, height: ${img.height}`)
}

img.src = 'path/to/image.jpg'

以上代码创建了一个 Image 对象，并使用其 onload 事件监听器，在图像加载完成后输出了图像文件的尺寸。需要注意的是，由于图像加载是一个异步操作，因此我们需要在监听器中访问 Image 对象的 width 和 height 属性。

另外，如果要获取当前页面上某个 <img> 元素的尺寸，我们可以直接访问该元素的 naturalWidth 和 naturalHeight 属性。

<img src="path/to/image.jpg" id="myImg">

const imgEl = document.querySelector('#myImg')
console.log(`width: ${imgEl.naturalWidth}, height: ${imgEl.naturalHeight}`)

以上代码获取了 <img> 元素的 naturalWidth 和 naturalHeight 属性，并输出了图像文件的尺寸。

获取图像文件大小和尺寸

要同时获取图像文件的大小和尺寸，我们可以结合以上两种方法，先获取文件大小，再使用 Image 对象获取文件尺寸。

-- -------------------- ---- -------
----- --------- - ------------------------------------------

------------------------------------ -- -- -
  ----- ---- - ------------------
  ----------------------

  ----- --- - --- -------

  ---------- - -- -- -
    ------------------- ------------- ------- ---------------
  -

  ------- - -------------------------
--

以上代码在获取文件大小后，创建了一个 Image 对象，并使用 URL.createObjectURL() 方法为其赋值，然后在图像加载完成后输出了图像文件的尺寸。需要注意的是，由于我们使用了 URL.createObjectURL() 方法，因此我们不需要将图像文件上传到服务器来获取其尺寸。

总结

本文介绍了如何使用 Javascript 获取图像文件的大小和尺寸，并提供了实用的代码示例。通过本文的学习，我们可以更好地处理图像文件，提高前端开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25919