Vuejs webp supports image plug-in development-JS Tutorial-php.cn

Vuejs webp supports image plug-in development

php中世界最好的语言

Release： 2018-03-07 17:41:44

Original

1900 people have browsed it

This time I will bring you the plug-in development of Vuejs webp that supports images. What are the precautions for Vuejs webp plug-in development? The following is a practical case, let's take a look.

I have been using vue.js for more than half a year. When I was making some Html5 pages, I found that many pages were composed of pictures. If the size of the pictures could be effectively compressed, the size of the entire project would be reduced a lot. This This is the starting point for why I wrote this simple thing.

Webp Baidu Encyclopedia has made it clear that the volume can be compressed to 60% of the original while maintaining the original image quality. This is a very cool thing. Take a look at the compatibility of webp. The picture below shows the latest webp support on caniuse

webp compatibility

Vuejs webp supports image plug-in development

The compatibility situation is still not so optimistic , but the chrome and Android camps have all supported it. So I did it anyway.

Source code github

The custom command system of Vue.js is very powerful, which is one of the fundamental reasons why I did this, so my idea is to pass in the image link in a command, Then when rendering the page, select which image to download based on whether the browser supports images in webp format. Here you need to determine whether the browser supports webp. Here I use the canvas method, and the code is as follows

var canUseWebp = (function() {  var elem = document.createElement(&#39;canvas&#39;);  if (!!(elem.getContext && elem.getContext(&#39;2d&#39;))) {    return elem.toDataURL(&#39;image/webp&#39;).indexOf(&#39;data:image/webp&#39;) === 0;
  } else {    return false;
  }
})();

Copy after login

This It was very simple when the command was updated. Then select different images according to whether they are supported.

function update(el, option) {    var attr = option.arg || &#39;src&#39;;    if (el.tagName.toLowerCase() === &#39;img&#39; && option.value) {
        el.setAttribute(attr, option.value);
    }
  };

Copy after login

However, at this time, I found that some small icons were missing. It turned out that my webpack configuration set images less than 10k Using base64 encoding,

So my final updated code is like this

function update(el, option) {    var attr = option.arg || &#39;src&#39;;    if (el.tagName.toLowerCase() === &#39;img&#39; && option.value) {      if (option.value.indexOf(&#39;data:image&#39;) < 0) {        var tmp = option.value.substring(0, option.value.lastIndexOf(&#39;.&#39;)) + &#39;.webp&#39;;
        el.setAttribute(attr, canUseWebp ? tmp : option.value);
      } else {
        el.setAttribute(attr, option.value);
      }
    }
  };

Copy after login

At this time vue.js 2.0 was released. I have made support for version 2.0. Since my instructions are very simple, the code is very easy

var isVueNext = Vue.version.split(&#39;.&#39;)[0] === &#39;2&#39;;  if (isVueNext) {
    Vue.directive(&#39;webp&#39;, function(el, binding) {
      update(el, {        arg: binding.arg,        value: binding.value
      });
    })
  } else {
    Vue.directive(&#39;webp&#39;, {      bind: function() {},      update: function(val, old) {
        update(this.el, {          arg: this.arg,          value: val
        });
      },      unbind: function() {}
    })
  }
};

Copy after login

In this way, my vue-webp instructions are completed.

Only instructions are not enough. You have to generate a picture in webp format yourself every time, which is too unfriendly. I did some searching and found that a webp-loader can automatically generate the corresponding webp file during webpack packaging and dev, which is great. Using the original author's webp-loader, I found that the hash of the file was different. I upgraded it with the latest version of imagemin, uploaded it to npm and called it webpn-loader (forgive me for not naming it),

I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!