好资源导航 » 文章资讯 » Vue自定义指令结合阿里云OSS优化图片的实现方法

Vue自定义指令结合阿里云OSS优化图片的实现方法

2023-08-09 12:02:06 66

图片往往在加载前端项目中占大头，如何既不损失图片质量，又提升加载速度呢？

根据显示设备pixelRatio和元素宽高来显示合适图片
略微压缩图片质量
使用webp

注册全局自定义指令

Vue.directive('img-condense',{
bind:(el,binding,vnode)=>{
letsrc=el.getAttribute('src')
letnewSrc=compressImg(src,el)
el.setAttribute('src',newSrc)
}
})

获取元素宽高和显示设备pixelRatio

letcompressImg=(imgUrl,el)=>{
//获取显示设备pixelRatio
letpixelRatio=window.devicePixelRatio
letelWidth=elStyle.width*pixelRatio
letelHeight=elStyle.height*pixelRatio
letresize='/resize'
if(elWidth){
resize+=`,w_${elWidth}`
}
if(elHeight){
resize+=`,h_${elHeight}`
}
})

判断webp

letcanUseWebp=document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp')==0
letwebp=''
if(canUseWebp){
webp='/format,webp'
}

质量降低至80%

letossParam?x-oss-process=image${resize}/auto-orient,1/quality,Q_80/bright,-1${webp}

完整版


Vue.directive('img-condense',{
bind:(el,binding,vnode)=>{
letsrc=el.getAttribute('src')
letnewSrc=compressImg(src,el)
el.setAttribute('src',newSrc)
}
})
letcompressImg=(imgUrl,el)=>{
//如果不是oss或者已经压缩过的图片直接返回
if(imgUrl.includes('aliyuncs.com')||imgUrl.indexOf('blob')===0||imgUrl.includes('x-oss-process=')){
returnimgUrl
}
//获取显示设备pixelRatio
letpixelRatio=window.devicePixelRatio
letelWidth=el.width*pixelRatio
letelHeight=el.height*pixelRatio
letresize='/resize'
if(elWidth){
resize+=`,w_${elWidth}`
}
if(elHeight){
resize+=`,h_${elHeight}`
}
if(!elWidth&&!elHeight){
resize=''
}
//判断webp
letcanUseWebp=document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp')==0
letwebp=''
if(canUseWebp){
webp='/format,webp'
}
return`${imgUrl}?x-oss-process=image${resize}/auto-orient,1/quality,Q_80/bright,-1${webp}`
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue自定义指令结合阿里云OSS优化图片的实现方法

热门推荐

随机推荐