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

问题描述

问 题

怎么用js判断图片尺寸？

 <input type="file"  onchange="loadPic(this)"/>
 function loadPic(img){
    consoel.log(img.width);
}

解决方案

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

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

2. reader去读取文件

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

4. 移出图片节点

代码，见以下：

<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}`);
    }

这篇关于javascript - 用input 上传图片，怎样获取图片的尺寸大小呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！