Vuejs webp는 이미지 플러그인 개발을 지원합니다.-JS 튜토리얼-php.cn

Vuejs webp는 이미지 플러그인 개발을 지원합니다.

php中世界最好的语言

풀어 주다： 2018-03-07 17:41:44

원래의

1887명이 탐색했습니다.

이번에는 이미지를 지원하는 Vuejs webp 플러그인 개발에 대해 알려드리겠습니다. Vuejs webp 플러그인 개발 시 주의사항은 무엇인가요?

vue.js를 반년 넘게 사용해왔는데 HTML5 페이지를 만들면서 많은 페이지가 그림으로 구성되어 있다는 걸 알았습니다. 프로젝트가 많이 줄어들 것입니다. 이것이 제가 이 글을 쓴 이유입니다.

Webp Baidu 백과사전에서는 원본 화질을 유지하면서 볼륨을 원본의 60%까지 압축할 수 있다고 명시했습니다. 이것은 매우 멋진 일입니다. webp의 호환성을 살펴보세요. 아래 그림은 caniuse의 최신 webp 지원을 보여줍니다. webp의 호환성은 아직 낙관적이지 않지만 Chrome 및 Android 캠프에서는 이미 지원하고 있습니다. 그래서 어쨌든 해냈습니다.

소스 코드 github

Vue.js의 사용자 정의 명령 시스템은 매우 강력합니다. 이것이 제가 이 작업을 수행한 근본적인 이유 중 하나이므로 명령에 이미지 링크를 전달한 다음 그에 따라 검색하는 것이 제 생각입니다. 페이지 렌더링 시간에 브라우저가 webp 형식의 이미지를 지원하는지 여부를 선택하세요. 여기서는 브라우저가 webp를 지원하는지 확인해야 합니다. 여기서는 캔버스 방법을 사용합니다. 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);
    }
  };

로그인 후 복사

그런데 이때 일부 작은 아이콘이 누락된 것을 발견했습니다. ,

그래서 제가 최종 업데이트한 코드는 이렇습니다

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 형식으로 사진을 직접 생성해야 하는데, 이는 너무 불친절합니다. 저는 몇 가지 조사를 한 결과 webp-loader가 webpack 패키징 및 개발 중에 해당 webp 파일을 자동으로 생성할 수 있다는 것을 발견했습니다. 이는 훌륭합니다. 원저자의 webp-loader를 사용했는데 파일의 해시가 다른 것을 발견했습니다. 최신 버전의 imagemin으로 업그레이드하고 webpn-loader라는 npm에 업로드했습니다(이름을 지정하지 않은 점 양해 부탁드립니다). 이 기사의 사례를 읽은 후 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!