js如何获取图片的尺寸？

JavaScript09

js如何获取图片的尺寸？,第1张

项目的需求是上传一张图片，然后验证该图片的尺寸，如果跟预期的不符，就不给上传

首先，可以通过new FileReader()，再通过将上传的图片文件传给实例的readAsDataUrl()，当文件加载完成触发onload事件，传递event，通过event.target.result来获取图片的链接(base64格式的)

接着，new Image()实例，将上面获取的链接设置为图片的src属性，当图片加载完成触发onload事件就可以通过width、height属性来读取图片的长宽啦~~

给img添加加载事件，图像加载完成才能获取图片的尺寸。

html中添加onload

function showSize(img){

alert(img.width)

alert(img.height)

}

<div style="width:100pxheight:600px"><img src="1.jpg" onload="showSize(this)"></div>

或者js代码中添加onload

let img=document.querySelector("div img")

img.onload = function() {

alert(img.height)

alert(img.width)

}

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

</head>

<body>

<input type="file" id="fs" onchange="getFileSize()"/>

</body>

<script type="text/javascript">

function getFileSize(){var file = document.getElementById("fs") var size = file.files[0].size

alert(size)

}</script>

</html>