用input 上传图片，怎样获取图片的尺寸大小呢

Question

怎么用js判断图片尺寸？ <input type="file"  onchange="loadPic(this)"/> function loadPic(img){    consoel.log(img.width);}

Answer 1

我的原理就是和上传预览差不多，简单说下:

onchange触发，获取当前file对象(这里可以获取图片的大小、类型、修改时间等)

reader去读取文件

塞到页面，获取图片的宽高

移出图片节点

代码，见以下：

<input type="file" onchange="getImgInfo(this,getImgInfoCb)"/>

function getImgInfo(ev,fnCallBack){

        var oFile=ev.files[0];

        var reader=new FileReader();

        reader.onload=function(){

            // 也可以用 window.URL.createObjectURL(this.result)

            var oImg=new Image();

            oImg.src=this.result;

            document.body.appendChild(oImg);

            

            oImg.onload=function(){

                var imgWidth=oImg.offsetWidth;

                var imgHeight=oImg.offsetWidth;

                fnCallBack && fnCallBack({

                    width:imgWidth,

                    height:imgHeight

                })

                document.body.removeChild(oImg);

            };

        };

        reader.readAsDataURL(oFile);

    }

    function getImgInfoCb(json){

        console.log(`width:${json.width} , height:${json.height}`);

    }