一般用在评论后台，比如要求图片只能在一定范围内细化。还用于在画布中裁剪图像时计算缩放比例。JS获取图片宽高获取naturalWidth（回调版）解决方法是获取naturalWidth。那么naturalWidth和width之间有什么区别呢？naturalWidth标识图像的原始宽度和高度。由于历史问题，width实际上标识了DOM元素的宽度和高度。因为img标签会被图片拉伸，所以当没有设置width属性时，width==naturalWidth当设置了width属性时，width!=naturalWidthgetImgRawSize=(img,cb)=>{var_image=img;if(_imageinstanceofHTMLImageElement){//传入的是DOM对象if(_image.naturalWidth){//推荐使用naturalWidth，因为value返回的是原始值，不会被属性影响returncb({width:_image.naturalWidth,height:_image.naturalHeight})}if(_image.complete){//如果没有naturalWidth并且已经加载图片，大概率是不支持的//按顺序为了防止被属性影响，我们需要重新加载img，空tag=img.src}else{//如果加载不完整，直接使用_image=img;}}if(typeofimg=='string'){//传入的url_image=newImage();_image.src=img}_image.onload=_=>{//如果为了保险起见，可以考虑使用新的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=newImage()img.src='https://www.lilnong.top/static/img/defaultmatch.png'getImgRawSize(img,v=>console.log(3,v))//测试未加载并设置宽高img=newImage()img.width=10img.height=20img.src='https://www.lilnong.top/static/img/QQ_20190301172837.jpg'getImgRawSize(img,v=>console.log(4,v))//测试加载img=newImage()img.src='https://www.lilnong.top/static/img/Rectangle%2010.png'img.onload=()=>getImgRawSize(img,v=>console.log(5,v))//测试加载并设置宽度和高度img=newImage()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版）同上，只是改成无极版本getImgRawSize=(img)=>{returnPromise.resolve(newPromise(function(reslove,reject){var_image=img;if(_imageinstanceofHTMLImageElement){if(_image.naturalWidth)returnreslove({width:_image.naturalWidth,高度:_image.naturalHeight})img=img.src}if(typeofimg=='string'){_image=newImage();_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=newImage()img.src='https://www.lilnong.top/static/img/defaultmatch.png'getImgRawSize(img).then(v=>console.log(3,v))//测试不加载，设置宽高img=newImage()img.width=10img.height=20img.src='https://www.lilnong.top/static/img/QQ_20190301172837.jpg'getImgRawSize(img).then(v=>console.log(4,v))//测试加载img=newImage()img.src='https://www.lilnong.top/static/img/Rectangle%2010.png'img.onload=()=>getImgRawSize(img).then(v=>console.log(5,v))//测试已经加载并设置宽高img=newImage()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))
