javascript获取file图片类型的宽高属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" id="file">
  <script>
    document.getElementById('file').addEventListener('change', (event) => {
      const file = event.target.files[0];
      console.log('file:', file);
      const url = window.URL || window.webkitURL
      const image = new Image()
      // 创建Image的对象的url
      const objectURL = url.createObjectURL(file)
      image.src = objectURL
      image.onload = () => {
        const { width: w, height: h } = image
        console.log('width:', w, ' height:', h)
        /**
       * 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，
       * 即使你已经用相同的对象作为参数创建过。
       * 当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放
       */
        url.revokeObjectURL(objectURL);
      }
    })

  </script>
</body>

</html>
javascript获取file图片类型的宽高属性

推荐阅读更多精彩内容
