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 获取select下拉列表值的代码
Sep 07 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
JS继承用法实例分析
Feb 05 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
JS轮播图的实现方法2
Aug 25 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
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
详解python的ORM中Pony用法
2018/02/09 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
应届大学生自荐信
2013/12/05 职场文书
《灯光》教学反思
2014/02/08 职场文书
趵突泉导游词
2015/02/03 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
检察院起诉意见书
2015/05/20 职场文书
李强为自己工作观后感
2015/06/11 职场文书