个别用于审核后盾，比如说要求图片在肯定区间内能力加精。
也用于在 canvas 中裁图时计算缩放比例。

JS 获取图片宽高

获取 naturalWidth（callback 版本）

计划为获取 naturalWidth。那么 naturalWidth 和 width 有什么不同？

  • 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})    }}

测试截图

测试用例

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 = 10img.height = 20img.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 = 10img.height = 20img.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})    }))}

测试截图

测试用例

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 = 10img.height = 20img.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 = 10img.height = 20img.src = 'https://www.lilnong.top/static/img/ml-btn6.png'img.onload = ()=>getImgRawSize(img).then(v=>console.log(6, v))