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 相关文章推荐
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
JS数组的常用10种方法详解
May 08 Javascript
js实现电灯开关效果
Jan 19 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
CI框架安全类Security.php源码分析
2014/11/04 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python for和else语句趣谈
2019/07/02 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
介绍信范文
2015/01/31 职场文书
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
mysql中整数数据类型tinyint详解
2021/12/06 MySQL