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}`
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
mockjs+vue頁面直接展示數(shù)據(jù)的方法
這篇文章主要介紹了mockjs+vue頁面直接展示數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue2.0實現(xiàn)的tab標簽切換效果（內(nèi)容可自定義）示例
這篇文章主要介紹了vue2.0實現(xiàn)的tab標簽切換效果,結合實例形式分析了vue.js實現(xiàn)內(nèi)容可自定義的tab點擊切換功能相關操作技巧,需要的朋友可以參考下2019-02-02
最近在學習vue，今天正好發(fā)現(xiàn)個問題，本文介紹了v-html渲染組件問題，整理了問題的解決方法，有需要的小伙伴可以參考下2021-05-05
Vue實現(xiàn)拖拽功能的基本原理是監(jiān)聽鼠標事件,實時更新拖拽元素的位置,最后在合適的時機停止拖拽并更新元素位置,在Vue中,我們可以通過綁定相關事件來實現(xiàn)這一功能2025-02-02
我們有時需要限制文本框輸入內(nèi)容的類型,本節(jié)分享下正則表達式限制文本框只能輸入數(shù)字、小數(shù)點、英文字母、漢字等代碼,感興趣的朋友跟隨小編一起看看吧2023-12-12
Vue-resource實現(xiàn)ajax請求和跨域請求示例
本篇文章主要介紹了Vue-resource實現(xiàn)ajax請求和跨域請求示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)websocket客服聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了Vue中如何設置全局的cookie對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue前端解析Excel數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03