1. 首页
  2. SEO百科
  3. Web前端

图片上传获取宽高的方法小白教程_图片使用说明

最近,我负责的后台系统有一个图片上传校验图片比例的需求,以前没有做过这种需求,便查了一些资料总结了一下图片上传获取宽高的方法。想要获取图片的宽高首先要知道图片的url;一般图片上传UI组件或自己封装的组件都会获取到图片的url,知道url就好办了,上代码。var img_url = URL;//图片URL地址
var imgObj = new Image()

图片上传获取宽高的方法小白教程

最近,我负责的后台系统有一个图片上传校验图片比例的需求,以前没有做过这种需求,便查了一些资料总结了一下图片上传获取宽高的方法。
想要获取图片的宽高首先要知道图片的url;一般图片上传UI组件或自己封装的组件都会获取到图片的url,知道url就好办了,上代码。

图片上传获取宽高的方法小白教程_图片使用说明

var img_url = URL;//图片URL地址
var imgObj = new Image();//创建对象
imgObj.src = img_url;//改变图片地址
console.log(imgObj.width + "" + imgObj.height)

what?为啥输出是00;其实我也遇到过这个问题;原因是在输出之前图片还没有加载完,只要在图片加载完后就可以获取到了;

var img_url = URL;//图片URL地址
var imgObj = new Image();//创建对象
imgObj.src = img_url;//改变图片地址
imgObj.onload = function(){
    console.log(imgObj.width + "" + imgObj.height)
}

好了,这下就可以输出图片的宽高了;用这种方法效率不是很高,也可以用计时器循环检测来实现,只要图片宽和高任意一项大于0,就可获取到图片的宽和高;

// 记录当前时间戳
var start_time = new Date().getTime()
// 图片地址 后面加时间戳是为了避免缓存
var img_url = ‘url‘+start_time
// 创建对象
var imgObj = new Image()
// 改变图片的src
imgObj.src = img_url
// 定时执行获取宽高
var check = function(){
 // 只要任何一方大于0
 // 表示已经服务器已经返回宽高
    if (imgObj.width>0 || imgObj.height>0) {
        var diff = new Date().getTime() - start_time;
        console.log(imgObj.width + "" + imgObj.height)
        clearInterval(set);
    }
}
var set = setInterval(check,40)

这种方法比onload方法执行效率会快一些;

海计划公众号