Vuejs webp图片支持，插件开发过程~

tianyu 发布于2019-08-21 11:23 / 1948人阅读

摘要：看看的兼容情况，下图是上面最新的支持情况兼容情况还是不那么乐观，不过和安卓阵营已经全部支持。我有针对版本做了支持，由于我的指令非常简单，所以代码很轻松这样我的指令就算完成了。只有指令可不行，每次都要自己生成一份格式的图片，这太不友好了。

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

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

云服务器海外云主机 webp图片转换 vuejs模块化开发 vuejs组件开发实例图片存储过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86635.html

towebp-loader诞生记~ 一个webpack 图片loader

摘要：功能可以在中根据图片类型转换成一份和原图两份图片，并且集成了的功能支持的功能和文件名的功能。还有一些的大家仔细去读相关文档参考在上篇Vuejs webp图片支持，插件开发过程~ 中我做了一个图片转换成webp的组件，并且使用了相关的loader，但是我们在使用过程中发现webp和原图的hash是不一样的，这样我们就没有办法保留版本的概念了，临时我使用时间戳来作为替代，但是这样每次上传...

wenzi 2019-08-22 13:02 评论0 收藏0
谈谈Web应用中的图片优化技巧及反思

摘要：要注意老旧的浏览器不支持的特性，它会继续正常加载属性引用的图像。五安全地使用图片的优势这里不再赘述，简单来说这篇文章，我们将一起探讨，web应用中能对图片进行什么样的优化，以及反思一些负优化手段一、为什么要对图片进行优化对于大多数前端工程师来说，图片就是UI设计师(或者自己)切好的图，你要做的只是把图片丢进项目中，然后用以链接的方式呈现在页面上，而且我们也经常把精力放在项目的打包...

zone 2019-08-26 10:43 评论0 收藏0
Google I/O 2016 笔记之图像压缩

摘要：写在前面开发中的图像压缩是一个很重要的部分。而这篇文章会让我们从另外一个角度来认识平台下的图像压缩和优化。所以，它是你图像压缩和优化的首选，尽可能的去使用吧。写在前面 Android开发中的图像压缩是一个很重要的部分。而这篇文章会让我们从另外一个角度来认识Android平台下的图像压缩和优化。这篇文章更适合和设计师一起来看，所以，如果你和你的设计师是好基友的话，不妨叫上他，倒两杯咖...

BWrong 2019-08-14 14:19 评论0 收藏0