Vuejswebp支持图片的插件开发

本人已经使用vue.js半年多了，在做一些Html5页面的时候发现很多页面都是图片组成的，如果能有效的压缩图片的体积那么整个项目体积就会减少很多，这是为什么写这个简单东西的起点。

Webp 百度百科上已经讲清楚在保持原画质的情况呀体积可以压缩到原来的60%这是很牛逼的一件事。看看webp的兼容情况，下图是caniuse上面最新的webp支持情况

webp兼容情况

兼容情况还是不那么乐观，不过chrome和安卓阵营已经全部支持。所以我还是做了这件事。

源码github

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的图片使用base编码，
所以最终我的更新代码是这样的

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(原谅我不会命名)，

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

js关于BOM操作的知识整理

js正则表达式的10个应用实例