前端哥在做图片放大工具的时候，上传需要获取图片的宽和高使用的方法，现在分享出来，以便于一些新手借鉴的同时方便我自己下次查阅而做个记录。当然在上传的时候可以获取到图片占用空间的大小，那么我下次再出一个示例，是获取图片占用空间和在不显示图片的情况下用js获取图片信息的宽和高整合在一起的。
先看一下效果图，至于怎么使用，大家可以看下面的demo
代码也不多，非常的简洁：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>在不显示图片的情况下用js获取图片的高贺宽 - 前端哥</title> <style> .tupiandizhi { width: 800px; height: 30px; margin: 20px auto;} .imgurl { width: 100%; height: 30px; line-height: 30px; padding: 0px 10px; border-radius: 4px 4px;} .box { width: 100px; height: 30px; margin: 20px auto; } .btn { display: block; width: 100%; height: 30px; line-height: 30px; text-align: center; background-color: #0bb27a; color: #FFFFFF; border-radius: 4px 4px;} .btn { cursor: pointer; opacity: 0.7;} </style> </head> <body> <h1 style="text-align: center;">在不显示图片的情况下用js获取图片的高贺宽 - 前端哥</h1> <div class="tupiandizhi"> <input class="imgurl" value="https://www.qianduange.cn/upload/coverImage/1672997964.jpg" /> </div> <div class="box"> <span class="btn">获取</span> </div> <script type="text/javascript" src="https://www.qianduange.cn/templets/default/js/jquery.min.js"></script> <script> $(".btn").unbind("click").click(function() { let img = $(".imgurl").val(); let imgsize = getImageSize(img); let a = imgsize.then((res)=>{ console.log(res.width) console.log(res.height) alert("尺寸：" res.width " x " res.height) }); }) function getImageSize(url) { return new Promise(function(resolve, reject) { let image = new Image(); image.onload = function() { resolve({ width: image.width, height: image.height }); }; image.onerror = function() { reject(new Error('error')); }; image.src = url; }); } </script> </body></html>