正文

掌握JS获取图片字节大小，轻松实现图片信息实时查看

/0 浏览量
1023

在网页开发中，我们经常需要处理图片，比如上传、预览、压缩等。而获取图片的字节大小是一个基础且重要的操作。本文将详细介绍如何使用JavaScript获取图片的字节大小，并实现图片信息的实时查看。

获取图片字节大小

要获取图片的字节大小，我们可以使用FileReader对象。FileReader是HTML5中新增的一个对象，用于异步读取本地文件或远程文件的内容。

以下是一个简单的示例，演示如何使用FileReader获取图片的字节大小：

// 假设有一个文件输入元素<input type="file" id="fileInput">
document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.onload = function() {
        console.log('图片宽度：' + img.width + 'px');
        console.log('图片高度：' + img.height + 'px');
        console.log('图片字节大小：' + file.size + '字节');
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }
});

在上面的代码中，我们首先为文件输入元素添加了一个change事件监听器。当用户选择文件后，我们获取到文件对象file。然后，我们创建一个FileReader对象，并为其onload事件添加一个回调函数。在回调函数中，我们创建一个Image对象，并设置其src属性为FileReader的result属性。这样，当图片加载完成后，我们可以获取到图片的宽度和高度。最后，我们打印出图片的字节大小。

实现图片信息实时查看

为了实现图片信息的实时查看，我们可以在网页上添加一个显示图片信息的区域。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片信息实时查看</title>
</head>
<body>
  <input type="file" id="fileInput">
  <div id="info">
    <p>图片宽度：<span id="width">0</span>px</p>
    <p>图片高度：<span id="height">0</span>px</p>
    <p>图片字节大小：<span id="size">0</span>字节</p>
  </div>
  <script>
    // ...（此处省略获取图片字节大小的代码）
  </script>
</body>
</html>

在上面的代码中，我们添加了一个div元素，用于显示图片信息。当用户选择文件后，我们更新div元素中的内容，以显示图片的宽度、高度和字节大小。

通过以上方法，我们可以轻松地使用JavaScript获取图片的字节大小，并实现图片信息的实时查看。这有助于我们在网页开发中更好地处理图片，提高用户体验。

-- 展开阅读全文 --