js如何获取图片的尺寸?

JavaScript014

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

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

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

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

直接系在innerHtml中只能显示为文本的

应该把img添加到DOM中去才可以显示

参考下面的代码

 window.onload = function () {

             var o = document.getElementById("C_Top")

             var img = document.createElement("img")

             img.src = "

https://www.baidu.com/img/bdlogo.png

"

             var b = document.getElementById("bin2")

             b.onclick = function () {

                 o.appendChild(img)

             }

         }

这样才能把img元素添加到document中