Vuejs WebP は画像プラグイン開発をサポートします-jsチュートリアル-php.cn

Vuejs WebP は画像プラグイン開発をサポートします

php中世界最好的语言

リリース： 2018-03-07 17:41:44

オリジナル

1888 人が閲覧しました

今回は、画像をサポートする Vuejs webp のプラグイン開発についてお届けします。Vuejs webp プラグイン開発の注意点は何ですか?実際の事例を見てみましょう。

私は半年以上 vue.js を使ってきましたが、HTML5 ページをいくつか作成していたときに、画像のサイズを効果的に圧縮できれば、多くのページが画像で構成されていることがわかりました。プロジェクトが大幅に削減されるため、これを簡単なものの出発点として書きました。

Webp Baidu Encyclopedia は、元の画質を維持したまま、ボリュームを元の 60% に圧縮できることを明らかにしました。これは非常に素晴らしいことです。 webp の互換性を見てください。下の図は caniuse での webp の互換性を示しています。webp の互換性はまだ楽観的ではありませんが、Chrome と Android 陣営はすでにサポートしています。それでとにかくやりました。

ソースコード github

Vue.js のカスタムコマンドシステムは非常に強力です。これが私がこれを行った根本的な理由の 1 つです。そのため、私のアイデアはコマンドで画像リンクを渡し、それに従って参照することです。ページのレンダリング時間にブラウザが webp 形式の画像をサポートしているかどうかを選択します。ここでは、canvas メソッドを使用します。コードは次のとおりです。 Vuejs WebP は画像プラグイン開発をサポートします

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;
  }
})();

ログイン後にコピー

それは非常に簡単です。現時点では、コマンドはサポートされているかどうかに応じて更新され、別の画像を選択します

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);
    }
  };

ログイン後にコピー

ただし、この時点で、Webpack の設定で 10k 未満の画像が Base64 エンコーディングを使用するように設定されていることがわかりました。 ,

最終的に更新されたコードは次のようになります

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);
      }
    }
  };

ログイン後にコピー

この時点で vue.js 2.0 がリリースされました。バージョン2.0に対応させていただきましたので、コードもとても簡単です

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() {}
    })
  }
};

ログイン後にコピー

以上で、vue-webpの説明は完了です。

説明書だけでは不十分です。毎回自分でWebP形式の画像を生成する必要があり、不親切すぎます。いくつか調査したところ、Webpack のパッケージ化と開発中に対応する WebP ファイルを自動的に生成できる WebP ローダーを見つけました。これは素晴らしいものです。オリジナルの作成者の webp-loader を使用したところ、ファイルのハッシュが異なることがわかり、imagemin の最新バージョンでアップグレードし、webpn-loader という名前の npm にアップロードしました (名前を付けていないことをお詫びします)。この記事の事例を読んで方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。