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 = 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}) })) }
测试截图
测试用例
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))
