xtpor/get-image-dimension.html

## get-image-dimension.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input id="file-upload" type="file">
  <script>
function getImageDimension(file, fn) {
  const url = URL.createObjectURL(file)
  const elem = document.createElement("img")
  elem.src = url
  elem.onload = () => {
    const dimension = { w: elem.width, h: elem.height }
    elem.src = null
    URL.revokeObjectURL(url)
    fn(dimension)
  }
}

const input = document.querySelector("#file-upload")
input.onchange = (e) => {
  const imageFile = e.target.files[0]
  getImageDimension(imageFile, (wh) => {
    console.log("image dimension", wh)
  })
}
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<input id="file-upload" type="file">
	<script>
	function getImageDimension(file, fn) {
	const url = URL.createObjectURL(file)
	const elem = document.createElement("img")
	elem.src = url
	elem.onload = () => {
	const dimension = { w: elem.width, h: elem.height }
	elem.src = null
	URL.revokeObjectURL(url)
	fn(dimension)
	}
	}

	const input = document.querySelector("#file-upload")
	input.onchange = (e) => {
	const imageFile = e.target.files[0]
	getImageDimension(imageFile, (wh) => {
	console.log("image dimension", wh)
	})
	}
	</script>
	</body>
	</html>