js获取图片宽高

js获取图片宽高代码片段如下：

// 获取到url地址中带的imgUrl参数(request是自定义方法)
var imgUrl = request("imgUrl");
// 创建Image对象
var img = new Image();
// 改变图片的src
img.src = imgUrl;
// 第一次打印图片的宽高
console.log(img.width);  // 结果为0
console.log(img.height); // 结果为0
// 图片资源加载完成执行
img.onload = function(){
    // 第二次打印图片的宽高
    console.log(img.width);  // 结果为320
    console.log(img.height); // 结果为180
};

第一次打印的结果为0是因为此时图片还没有被加载完成，在onload之后就可以正常获取到图片的宽高了。但是如果图片资源比较大这个过程会稍微慢一些，我们可以做以下优化：

// 获取到url地址中带的imgUrl参数(request是自定义方法)
var imgUrl = request("imgUrl");
// 创建Image对象
var img = new Image();
// 改变图片的src
img.src = imgUrl;
// 判断是否有缓存
if (img.complete) {
    // 刷新时通过complete从缓存快速获取宽高
    console.log(img.width);  // 结果为320
    console.log(img.height); // 结果为180
} else {
    // 图片资源加载完成执行
    img.onload = function(){
        // 第一次加载通过onload获取宽高
        console.log(img.width);  // 结果为320
        console.log(img.height); // 结果为180
    };
}

完！