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

 更新时间:2019年11月12日 14:14:36   转载 作者:7coder  
这篇文章主要介绍了Vue自定义指令结合阿里云OSS优化图片的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

  • 根据显示设备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}`
}

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

相关文章

  • vue实现动态添加数据滚动条自动滚动到底部的示例代码

    vue实现动态添加数据滚动条自动滚动到底部的示例代码

    本篇文章主要介绍了vue实现动态添加数据滚动条自动滚动到底部的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 从vue源码看props的用法

    从vue源码看props的用法

    平时写vue的时候知道 props 有很多种用法,今天我们来看看vue内部是怎么处理 props 中那么多的用法的。非常具有实用价值,需要的朋友可以参考下
    2019-01-01
  • VUE安装使用教程详解

    VUE安装使用教程详解

    这篇文章主要介绍了安装使用VUE的教程,本文给大家提到了遇到的问题原因分析及解决方法,需要的朋友可以参考下
    2019-06-06
  • 学习vue.js表单控件绑定操作

    学习vue.js表单控件绑定操作

    这篇文章主要和大家一起学习vue.js表单控件绑定操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 使用iView Upload 组件实现手动上传图片的示例代码

    使用iView Upload 组件实现手动上传图片的示例代码

    这篇文章主要介绍了使用iView Upload 组件实现手动上传图片的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • mpvue性能优化实战技巧(小结)

    mpvue性能优化实战技巧(小结)

    这篇文章主要介绍了mpvue性能优化实战技巧(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue 项目build错误异常的解决方法

    vue 项目build错误异常的解决方法

    这篇文章主要介绍了vue build错误异常的解决方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 使用Vue.js和Element-UI做一个简单登录页面的实例

    使用Vue.js和Element-UI做一个简单登录页面的实例

    下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue项目中axios使用详解

    vue项目中axios使用详解

    这篇文章主要介绍了vue项目中axios使用方法以及原理介绍,如果你正巧学习这个知识点,那么参考下吧。
    2018-02-02
  • element-ui table span-method(行合并)的实现代码

    element-ui table span-method(行合并)的实现代码

    element-ui官网中关于行合并的例子是根据行号进行合并的,这显然不符合我们日常开发需求,因为通常我们table中的数据都是动态生成的,非常具有实用价值,需要的朋友可以参考下
    2018-12-12

最新评论