面试题:JS 获取图片宽高

linong

一般用于审核后台,比如说要求图片在一定区间内才能加精
也用于在 canvas 中裁图时计算缩放比例

JS 获取图片宽高

获取 naturalWidth(callback 版本)

方案为获取 naturalWidth。那么 naturalWidthwidth 有什么不同?

  • naturalWidth 标识图片的原始宽高。
  • width 因为历史问题,标识的其实是 DOM 元素宽高。
  • 因为 img 标签会被图片撑开,所以

    • 在不设置 width 属性时,width == naturalWidth
    • 在设置了 width 属性时,width != naturalWidth
getImgRawSize = (img, cb) => {
    var _image = img;
    if (_image instanceof HTMLImageElement) {
        // 传入的是 DOM 对象
        if (_image.naturalWidth) {
            // 推荐使用 naturalWidth ,因为该值返回的是原始值,不会被属性影响
            return cb({width: _image.naturalWidth, height: _image.naturalHeight})
        }
        if (_image.complete) {
            // 如果没有 naturalWidth 且图片已加载完成,那么很大几率是不支持
            // 为了防止被属性影响,我们要用空白的标签重新加载
            img = img.src
        }else{
            // 没有加载完成的话直接用
            _image = img;
        }
    }
    if(typeof img == 'string'){
        // 传入的是 url
        _image = new Image();
        _image.src = img
    }
    _image.onload = _ => {
        // 如果想要安全的,可以考虑拿不到naturalWidth就是用新的 Image 来获取
        cb({width: _image.naturalWidth || _image.width, height: _image.naturalHeight||_image.height})
    }
    _image.onerror = _ => {
        cb({width: 0, height: 0})
    }
}

测试截图

image.png

测试用例

getImgRawSize('https://www.lilnong.top/static/img/ml-active-btn1.png', v=>console.log(1, v))
getImgRawSize('https://www.lilnong.top/static/img/ml-active-btn6.png', v=>console.log(2, v))

// 测试未加载
img = new Image()
img.src = 'https://www.lilnong.top/static/img/defaultmatch.png'
getImgRawSize(img, v=>console.log(3,v))


// 测试未加载且设置宽高
img = new Image()
img.width = 10
img.height = 20
img.src = 'https://www.lilnong.top/static/img/QQ_20190301172837.jpg'
getImgRawSize(img, v=>console.log(4,v))


// 测试已加载
img = new Image()
img.src = 'https://www.lilnong.top/static/img/Rectangle%2010.png'
img.onload = ()=>getImgRawSize(img, v=>console.log(5,v))

// 测试已加载且设置宽高
img = new Image()
img.width = 10
img.height = 20
img.src = 'https://www.lilnong.top/static/img/ml-btn6.png'
img.onload = ()=>getImgRawSize(img, v=>console.log(6,v))

获取 naturalWidth(Promise 版本)

实现和上面是一致的,只不过改为了 Promise 版本。

getImgRawSize = (img) => {
    return Promise.resolve(new Promise(function(reslove, reject){
        var _image = img;
        if (_image instanceof HTMLImageElement) {
            if (_image.naturalWidth) return reslove({width: _image.naturalWidth, height: _image.naturalHeight})
            img = img.src
        }
        if(typeof img == 'string'){
            _image = new Image();
            _image.src = img
        }
        _image.onload = _ =>  reslove({width: _image.naturalWidth || _image.width, height: _image.naturalHeight||_image.height})
        _image.onerror = _ =>  reject({width: 0, height: 0})
    }))
}

测试截图

image.png

测试用例

getImgRawSize('https://www.lilnong.top/static/img/ml-active-btn1.png').then(v=>console.log(1, v))
getImgRawSize('https://www.lilnong.top/static/img/ml-active-btn6.png').then(v=>console.log(2, v))

// // 测试未加载
img = new Image()
img.src = 'https://www.lilnong.top/static/img/defaultmatch.png'
getImgRawSize(img).then(v=>console.log(3, v))


// 测试未加载且设置宽高
img = new Image()
img.width = 10
img.height = 20
img.src = 'https://www.lilnong.top/static/img/QQ_20190301172837.jpg'
getImgRawSize(img).then(v=>console.log(4, v))


// 测试已加载
img = new Image()
img.src = 'https://www.lilnong.top/static/img/Rectangle%2010.png'
img.onload = ()=>getImgRawSize(img).then(v=>console.log(5, v))

// 测试已加载且设置宽高
img = new Image()
img.width = 10
img.height = 20
img.src = 'https://www.lilnong.top/static/img/ml-btn6.png'
img.onload = ()=>getImgRawSize(img).then(v=>console.log(6, v))
阅读 2.3k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

21.6k 声望
4.8k 粉丝
0 条评论
你知道吗?

Read-Search-Ask

21.6k 声望
4.8k 粉丝
宣传栏