摘要:看看的兼容情況,下圖是上面最新的支持情況兼容情況還是不那么樂觀,不過和安卓陣營已經全部支持。我有針對版本做了支持,由于我的指令非常簡單,所以代碼很輕松這樣我的指令就算完成了。只有指令可不行,每次都要自己生成一份格式的圖片,這太不友好了。
本人已經使用vue.js半年多了,在做一些Html5頁面的時候發現很多頁面都是圖片組成的,如果能有效的壓縮圖片的體積那么整個項目體積就會減少很多,這是為什么寫這個簡單東西的起點。
Webp 百度百科上已經講清楚在保持原畫質的情況呀體積可以壓縮到原來的60%這是很牛逼的一件事。看看webp的兼容情況,下圖是caniuse上面最新的webp支持情況
兼容情況還是不那么樂觀,不過chrome和安卓陣營已經全部支持。所以我還是做了這件事。
Vue.js 的自定義指令系統十分強大是我做這件事的根本原因之一,所以我的設想是在一個指令中傳入圖片鏈接,然后在頁面渲染的時候根據瀏覽器是否支持webp格式的圖片選擇下載那個圖片,這里就需要判斷瀏覽器是否支持webp了,這里我用到的是canvas方法,代碼如下
var canUseWebp = (function() { var elem = document.createElement("canvas"); if (!!(elem.getContext && elem.getContext("2d"))) { return elem.toDataURL("image/webp").indexOf("data:image/webp") === 0; } else { return false; } })();
這時候就非常簡單了指令在update的時候根據是否支持然后選擇不同的圖片
function update(el, option) { var attr = option.arg || "src"; if (el.tagName.toLowerCase() === "img" && option.value) { el.setAttribute(attr, option.value); } };
然而事情的這個時候發現一些小的圖標不見了,原來我的webpack配置中設置了小于10k的圖片使用base64編碼,
所以最終我的更新代碼是這樣的
function update(el, option) { var attr = option.arg || "src"; if (el.tagName.toLowerCase() === "img" && option.value) { if (option.value.indexOf("data:image") < 0) { var tmp = option.value.substring(0, option.value.lastIndexOf(".")) + ".webp"; el.setAttribute(attr, canUseWebp ? tmp : option.value); } else { el.setAttribute(attr, option.value); } } };
這個時候vue.js 2.0發布了。我有針對 2.0版本做了支持,由于我的指令非常簡單,所以代碼很輕松
var isVueNext = Vue.version.split(".")[0] === "2"; if (isVueNext) { Vue.directive("webp", function(el, binding) { update(el, { arg: binding.arg, value: binding.value }); }) } else { Vue.directive("webp", { bind: function() {}, update: function(val, old) { update(this.el, { arg: this.arg, value: val }); }, unbind: function() {} }) } };
這樣我的vue-webp指令就算完成了。
只有指令可不行,每次都要自己生成一份webp格式的圖片,這太不友好了。我有查找一番,發現一個webp-loader可以在webpack打包和dev的時候自動生成相應的webp文件,太好了。使用原作者的webp-loader發現文件的hash不一樣,我又用imagemin最新版本升級了一下,上傳到npm叫webpn-loader(原諒我不會命名),
具體使用方法可以參考我的 Vue.js 2.0 后臺項目 模板項目
謝謝大家,看到這里。歡迎各種star
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86635.html
摘要:功能可以在中根據圖片類型轉換成一份和原圖兩份圖片,并且集成了的功能支持的功能和文件名的功能。還有一些的大家仔細去讀相關文檔參考 在上篇Vuejs webp圖片支持,插件開發過程~ 中我做了一個圖片轉換成webp的組件,并且使用了相關的loader,但是我們在使用過程中發現webp和原圖的hash是不一樣的,這樣我們就沒有辦法保留版本的概念了,臨時我使用時間戳來作為替代,但是這樣每次上傳...
摘要:要注意老舊的瀏覽器不支持的特性,它會繼續正常加載屬性引用的圖像。五安全地使用圖片的優勢這里不再贅述,簡單來說 這篇文章,我們將一起探討,web應用中能對圖片進行什么樣的優化,以及反思一些負優化手段 一、為什么要對圖片進行優化 對于大多數前端工程師來說,圖片就是UI設計師(或者自己)切好的圖,你要做的只是把圖片丟進項目中,然后用以鏈接的方式呈現在頁面上,而且我們也經常把精力放在項目的打包...
摘要:寫在前面開發中的圖像壓縮是一個很重要的部分。而這篇文章會讓我們從另外一個角度來認識平臺下的圖像壓縮和優化。所以,它是你圖像壓縮和優化的首選,盡可能的去使用吧。 寫在前面 Android開發中的圖像壓縮是一個很重要的部分。而這篇文章會讓我們從另外一個角度來認識Android平臺下的圖像壓縮和優化。 這篇文章更適合和設計師一起來看,所以,如果你和你的設計師是好基友的話,不妨叫上他,倒兩杯咖...
閱讀 1207·2021-11-17 09:33
閱讀 3612·2021-09-28 09:42
閱讀 3343·2021-09-13 10:35
閱讀 2496·2021-09-06 15:00
閱讀 2443·2021-08-27 13:12
閱讀 3612·2021-07-26 23:38
閱讀 1849·2019-08-30 15:55
閱讀 542·2019-08-30 15:53