Vuejs WebP unterstützt die Entwicklung von Bild-Plug-Ins

Dieses Mal werde ich Ihnen die Plug-In-Entwicklung von Vuejs WebP vorstellen, die Bilder unterstützt ein Blick. Ich verwende vue.js seit mehr als einem halben Jahr. Als ich einige HTML5-Seiten erstellte, stellte ich fest, dass viele Seiten aus Bildern bestanden Die Größe des gesamten Projekts würde erheblich reduziert werden. Dies ist der Ausgangspunkt dafür, warum ich diese einfache Sache geschrieben habe.

Webp Baidu Encyclopedia hat deutlich gemacht, dass die Lautstärke auf 60 % des Originals komprimiert werden kann, während die ursprüngliche Bildqualität erhalten bleibt. Das ist eine sehr coole Sache. Schauen Sie sich die Kompatibilität von WebP an. Das Bild unten zeigt die neueste WebP-Unterstützung für Caniuse nicht so optimistisch, aber die Chrome- und Android-Lager haben es alle unterstützt. Also habe ich es trotzdem gemacht.

Quellcode Github

Das benutzerdefinierte Befehlssystem von Vue.js ist sehr leistungsfähig, was einer der Hauptgründe ist, warum ich dies getan habe, daher ist meine Idee, den Bildlink einzugeben Wählen Sie beim Rendern der Seite aus, welches Bild heruntergeladen werden soll, basierend darauf, ob der Browser Bilder im Webp-Format unterstützt. Hier verwende ich die Canvas-Methode. Der Code lautet wie folgt

Zu diesem Zeitpunkt ist der Befehl sehr einfach. Wählen Sie beim Aktualisieren verschiedene Bilder aus, je nachdem, ob sie unterstützt werden oder nicht.

Zu diesem Zeitpunkt habe ich jedoch festgestellt, dass einige Kleine Symbole fehlten. Es stellte sich heraus, dass ich sie in meiner Webpack-Konfiguration festgelegt hatte, die mit Base64 codiert wurden.

Mein endgültiger aktualisierter Code sieht also so aus.

Zu diesem Zeitpunkt vue.js 2.0 wurde veröffentlicht. Ich habe Unterstützung für Version 2.0 bereitgestellt. Da meine Anweisungen sehr einfach sind, ist der Code sehr einfach.

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

Auf diese Weise sind meine Vue-Webp-Anweisungen abgeschlossen.

Nur ​​Anweisungen reichen nicht aus. Sie müssen jedes Mal selbst ein Bild im Webp-Format erstellen, was zu unfreundlich ist. Ich habe ein wenig recherchiert und einen WebP-Loader gefunden, der beim Packen und Entwickeln des Webpacks automatisch entsprechende WebP-Dateien generieren kann, was großartig ist. Ich habe den WebP-Loader des ursprünglichen Autors verwendet und festgestellt, dass der Hash der Datei anders war. Ich habe ihn auf npm hochgeladen und ihn WebPN-Loader genannt (entschuldigen Sie, dass ich ihn nicht benannt habe). >

Ich glaube es, nachdem ich den Fall in diesem Artikel gelesen habe. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

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

Verwandte Lektüre:

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

js-Wissen über Stücklistenoperationen

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

js-regulärer Ausdruck

10 Anwendungsbeispiele

Das obige ist der detaillierte Inhalt vonVuejs WebP unterstützt die Entwicklung von Bild-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!