js获取本地图片文件尺寸

发布: 2018-08-15 18:34:46标签: 前端开发

js获取本地图片文件尺寸

第一次碰到这种需求,随手记录一下

01<!doctype html>
02<html lang='en'>
03<head>
04 <meta charset='UTF-8'>
05 <meta name='viewport'
06 content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
07 <meta http-equiv='X-UA-Compatible' content='ie=edge'>
08 <title>Document</title>
09</head>
10<body>
11<input type='file'>
12<script>
13 document.querySelector('input').onchange = function () {
14 if (!file) return // 没有选择图片,直接return
15 const [file] = this.files // 过滤图片类型
16 if (!(/^image\/[jpeg|png|jpg|gif|svg|ico]/ig.test(file.type))) {
17 alert('请上传图片类型文件')
18 return
19 }
20
21 const img = new Image()
22 img.src = URL.createObjectURL(file)
23 img.onload = function() {
24 console.log(this.height, this.width)
25 }
26 }
27</script>
28</body>
29</html>
复制代码