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 cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
JS操作JSON要领详细总结
2013/08/25 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Python读大数据txt
2016/03/28 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
Python加速程序运行的方法
2020/07/29 Python
全球度假村:Club Med
2017/11/27 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
525心理活动总结
2014/07/04 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
商家认证委托书格式
2014/10/16 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
护林员个人总结
2015/03/04 职场文书
音乐之声观后感
2015/06/04 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
windows系统搭建WEB服务器详细教程
2022/08/05 Servers