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-cli開發(fā)時,關于ajax跨域的解決方法(推薦)
下面小編就為大家分享一篇vue-cli開發(fā)時,關于ajax跨域的解決方法(推薦),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02Vue3+vant+ts 上滑加載解決上滑調用多次數(shù)據(jù)的問題(推薦)
這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調用多次數(shù)據(jù)的問題,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12粘貼可用的element-ui validateField局部校驗
這篇文章主要為大家介紹了粘貼可用element-ui中validateField局部校驗示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01