欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue自定義指令結合阿里云OSS優(yōu)化圖片的實現(xiàn)方法

 更新時間:2019年11月12日 14:14:36   作者:7coder  
這篇文章主要介紹了Vue自定義指令結合阿里云OSS優(yōu)化圖片的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

圖片往往在加載前端項目中占大頭,如何既不損失圖片質量,又提升加載速度呢?

  • 根據(jù)顯示設備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 或者已經(jīng)壓縮過的圖片直接返回
 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的介紹,可以發(fā)現(xiàn)Vue 最顯著的一個功能是響應系統(tǒng)。那么它的實現(xiàn)原理有又是如何呢?下面小編和大家來一起學習一下
    2019-05-05
  • Vue數(shù)組的劫持逐步分析講解

    Vue數(shù)組的劫持逐步分析講解

    小編這次要給大家分享的是如何實現(xiàn)vue2.x數(shù)組劫持,文章內容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲
    2023-01-01
  • Vue中之nextTick函數(shù)源碼分析詳解

    Vue中之nextTick函數(shù)源碼分析詳解

    這篇文章主要介紹了Vue中之nextTick函數(shù)源碼分析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • v-model中如何使用過濾器

    v-model中如何使用過濾器

    這篇文章主要介紹了v-model中如何使用過濾器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 前端vue打包項目,如何解決跨域問題

    前端vue打包項目,如何解決跨域問題

    這篇文章主要介紹了前端vue打包項目,如何解決跨域問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue.js在使用中的一些注意知識點

    Vue.js在使用中的一些注意知識點

    這篇文章主要給大家介紹了Vue.js在使用中的一些注意知識點,文中介紹的非常詳細,對大家學習或者使用Vue.js具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-04-04
  • vue-cli開發(fā)時,關于ajax跨域的解決方法(推薦)

    vue-cli開發(fā)時,關于ajax跨域的解決方法(推薦)

    下面小編就為大家分享一篇vue-cli開發(fā)時,關于ajax跨域的解決方法(推薦),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • Vue3+vant+ts 上滑加載解決上滑調用多次數(shù)據(jù)的問題(推薦)

    Vue3+vant+ts 上滑加載解決上滑調用多次數(shù)據(jù)的問題(推薦)

    這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調用多次數(shù)據(jù)的問題,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • 用Vue.extend構建消息提示組件的方法實例

    用Vue.extend構建消息提示組件的方法實例

    本篇文章主要介紹了用Vue.extend構建消息提示組件的方法實例,具有一定的參考價值,有興趣的可以了解一下
    2017-08-08
  • 粘貼可用的element-ui validateField局部校驗

    粘貼可用的element-ui validateField局部校驗

    這篇文章主要為大家介紹了粘貼可用element-ui中validateField局部校驗示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01

最新評論