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


Posted in Javascript onNovember 12, 2019

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

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

注册全局自定义指令

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

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

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

判断webp

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

质量降低至80%

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

完整版

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
JavaScript常用工具方法封装
Feb 12 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 #Javascript
vue页面切换项目实现转场动画的方法
Nov 12 #Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 #Javascript
vue transition 在子组件中失效的解决
Nov 12 #Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 #Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 #Javascript
Vue退出登录时清空缓存的实现
Nov 12 #Javascript
You might like
PHP4实际应用经验篇(9)
2006/10/09 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python多进程重复加载的解决方式
2019/12/13 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
工程造价管理专业大专生求职信
2013/10/06 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
道士塔读书笔记
2015/06/30 职场文书
病房管理制度范本
2015/08/06 职场文书