Vue自定義指令結(jié)合阿里云OSS優(yōu)化圖片的實(shí)現(xiàn)方法
更新時(shí)間：2019年11月12日 14:14:36 作者：7coder
這篇文章主要介紹了Vue自定義指令結(jié)合阿里云OSS優(yōu)化圖片的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
圖片往往在加載前端項(xiàng)目中占大頭，如何既不損失圖片質(zhì)量，又提升加載速度呢？
- 根據(jù)顯示設(shè)備pixelRatio和元素寬高來(lái)顯示合適圖片
- 略微壓縮圖片質(zhì)量
- 使用webp
注冊(cè)全局自定義指令
Vue.directive('img-condense', {
bind: (el, binding, vnode) => {
let src = el.getAttribute('src')
let newSrc = compressImg(src, el)
el.setAttribute('src', newSrc)
}
})
獲取元素寬高和顯示設(shè)備pixelRatio
let compressImg = (imgUrl, el) => {
// 獲取顯示設(shè)備 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'
}
質(zhì)量降低至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)壓縮過(guò)的圖片直接返回
if (imgUrl.includes('aliyuncs.com') || imgUrl.indexOf('blob') === 0 || imgUrl.includes('x-oss-process=')){
return imgUrl
}
// 獲取顯示設(shè)備 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}`
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
mockjs+vue頁(yè)面直接展示數(shù)據(jù)的方法
這篇文章主要介紹了mockjs+vue頁(yè)面直接展示數(shù)據(jù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果（內(nèi)容可自定義）示例
這篇文章主要介紹了vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果,結(jié)合實(shí)例形式分析了vue.js實(shí)現(xiàn)內(nèi)容可自定義的tab點(diǎn)擊切換功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
最近在學(xué)習(xí)vue，今天正好發(fā)現(xiàn)個(gè)問(wèn)題，本文介紹了v-html渲染組件問(wèn)題，整理了問(wèn)題的解決方法，有需要的小伙伴可以參考下2021-05-05
在Vue中實(shí)現(xiàn)拖拽功能的實(shí)例
Vue實(shí)現(xiàn)拖拽功能的基本原理是監(jiān)聽(tīng)鼠標(biāo)事件,實(shí)時(shí)更新拖拽元素的位置,最后在合適的時(shí)機(jī)停止拖拽并更新元素位置,在Vue中,我們可以通過(guò)綁定相關(guān)事件來(lái)實(shí)現(xiàn)這一功能2025-02-02
我們有時(shí)需要限制文本框輸入內(nèi)容的類型,本節(jié)分享下正則表達(dá)式限制文本框只能輸入數(shù)字、小數(shù)點(diǎn)、英文字母、漢字等代碼,感興趣的朋友跟隨小編一起看看吧2023-12-12
Vue-resource實(shí)現(xiàn)ajax請(qǐng)求和跨域請(qǐng)求示例
本篇文章主要介紹了Vue-resource實(shí)現(xiàn)ajax請(qǐng)求和跨域請(qǐng)求示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
vue實(shí)現(xiàn)websocket客服聊天功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)websocket客服聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue中如何設(shè)置全局的cookie對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue前端解析Excel數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03