一般用于审核后台,比如说要求图片在一定区间内才能加精。也用于在 canvas 中裁图时计算缩放比例。
方案为获取 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))
实现和上面是一致的,只不过改为了 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))
在我们开发中,会遇到这样的场景:1.服务器返回Json数据,根据数据类型来显示是图片还是视频。2.前端上传文件,需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型
对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。
在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图
当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。
网站图片优化技巧:1、图片名包括关键词,2、Alt标签包括关键词,3、图片周边文本包括关键词,4、GLF和JPGE图画优化,5、在图片链接中运用锚文本关键字
前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?
目前浏览器对html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图
现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢?下面给出几种方式
在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!