js如何获取图片的尺寸？

JavaScript07

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

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

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

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

获取步骤如下所示。

1：可以使用定时器setInterval，每秒获取一次浏览器的宽和高。

2：使用jQuery可以这样获取window的宽高。

3：宽度 $(window)width() ，高度$(window).height()，自己写个函数，设定定时器的时间。

4：<body onresize="showSize()">，页面相关事onresize浏览器的窗口大小被改变时触发此事件。

（1）dom.style.width/height 获取dom元素内联样式中设定的width，height

（2）dom.currentStyle.width/height 获取dom元素渲染后的width，height，只支持IE

（3）window.getComputedStyle(dom).width/height 浏览器渲染后的元素宽,兼容性更好

（4）dom.getBoundingClientRect().width/height/left/top/right/ 计算一个元素的绝对位置（相对于视窗左上角），它能拿到元素的left、top、right、bottom、width、height

Element.getBoundingClientRect() - Web API 接口参考 | MDN