js通过图片路径快速获取图片的宽高

六月初六月初 JavaScipt 2019-03-21 11:06:20

js通过图片的路径来获取图片的真实宽高，并依据图片的宽高进行对应的处理解决方案！

效果预览：


示例完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <input type="file" id="imgurl"  accept="image/png,image/gif,image/jpeg"/>
        <br/>
        <p class="imgbox">
            
        </p>
        <script>
            var img_url = 'https://www.xuexiareas.com/upload/20181017/3453960dc2bc1e5886832e2d295cb4b6.jpg';
			// 创建对象
			var img = new Image();
			// 改变图片的src
			img.src = img_url;
			// 加载完成执行
			img.onload = function(){
				// 打印
				alert('width:'+img.width+',height:'+img.height);
			};
        </script>
    </body>
</html>

代码大致解析：

创建一个Image对象将需要获取图片宽高的路径赋值给创建的Image对象，onload加载执行后即可获取到图片的真实宽高！

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！