Merge pull request #11 from guox191/master

feat: webp error fallback
ElemeFE · Oct 29, 2018 · 57812bf · 57812bf
2 parents d8a465a + f085c96
commit 57812bf
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 23 deletions.
diff --git a/dist/vue-img.es6.js b/dist/vue-img.es6.js
@@ -1,7 +1,34 @@
+const ua = window.navigator.userAgent;
+
+const isIOS = /iphone|ios|ipad|ipod/i.test(ua);
+
+const isAlipay = /AliApp\(AP\/([\d.]+)\)/i.test(ua);
+
+const compareAlipayVersion = (targetVersion) => {
+  let version = ua.match(/AlipayClient[a-zA-Z]*\/(\d+(?:\.\d+)+)/);
+  version = version && version.length ? version[1] : '';
+  version = version.split('.');
+
+  targetVersion = targetVersion.split('.');
+  for (let i = 0, n1, n2; i < version.length; i++) {
+    n1 = parseInt(targetVersion[i], 10) || 0;
+    n2 = parseInt(version[i], 10) || 0;
+    if (n1 > n2) return -1
+    if (n1 < n2) return 1
+  }
+
+  return 0
+};
+
+const checkSupport = () => {
+  // only support since 10.1.0
+  return isIOS && isAlipay && compareAlipayVersion('10.1.0') >= 0
+};
+
 const VueImg$1 = Object.create(null);
 
 // Check webP support
-VueImg$1.canWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
+VueImg$1.canWebp = checkSupport() || (!![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0);
 
 // Default cdn prefix
 const protocol = location.protocol === 'https:' ? 'https://' : 'http://';
@@ -198,15 +225,20 @@ const install = (Vue, opt) => {
 
     return new Promise(resolve => {
       img.onload = () => {
-        setAttr(el, vImgSrc, vnode.tag);
+        setAttr(el, img.src, vnode.tag);
         resolve();
       };
-      if (vImgErr) {
-        img.onerror = () => {
+      img.onerror = () => {
+        // webp图片加载失败降级到普通图片
+        // 兼容客户端处理webp失败的情况
+        const webpReg = /format\/webp\//;
+        if (webpReg.test(img.src)) {
+          img.src = vImgSrc.replace(webpReg, '');
+        } else if (vImgErr) {
           setAttr(el, vImgErr, vnode.tag);
           resolve();
-        };
-      }
+        }
+      };
       setTimeout(() => {
         resolve();
       }, delay);

diff --git a/dist/vue-img.js b/dist/vue-img.js
@@ -4,10 +4,37 @@
   (global.VueImg = factory());
 }(this, (function () { 'use strict';
 
+var ua = window.navigator.userAgent;
+
+var isIOS = /iphone|ios|ipad|ipod/i.test(ua);
+
+var isAlipay = /AliApp\(AP\/([\d.]+)\)/i.test(ua);
+
+var compareAlipayVersion = function (targetVersion) {
+  var version = ua.match(/AlipayClient[a-zA-Z]*\/(\d+(?:\.\d+)+)/);
+  version = version && version.length ? version[1] : '';
+  version = version.split('.');
+
+  targetVersion = targetVersion.split('.');
+  for (var i = 0, n1 = (void 0), n2 = (void 0); i < version.length; i++) {
+    n1 = parseInt(targetVersion[i], 10) || 0;
+    n2 = parseInt(version[i], 10) || 0;
+    if (n1 > n2) { return -1 }
+    if (n1 < n2) { return 1 }
+  }
+
+  return 0
+};
+
+var checkSupport = function () {
+  // only support since 10.1.0
+  return isIOS && isAlipay && compareAlipayVersion('10.1.0') >= 0
+};
+
 var VueImg$1 = Object.create(null);
 
 // Check webP support
-VueImg$1.canWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
+VueImg$1.canWebp = checkSupport() || (!![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0);
 
 // Default cdn prefix
 var protocol = location.protocol === 'https:' ? 'https://' : 'http://';
@@ -147,8 +174,7 @@ var getImageClass = function (opt) {
       keys: [
         'loading', 'error',
         'quality', 'delay',
-        'prefix', 'suffix', 'adapt',
-      ],
+        'prefix', 'suffix', 'adapt' ],
     });
   };
 
@@ -161,8 +187,7 @@ var getImageClass = function (opt) {
       keys: [
         'width', 'height', 'quality',
         'format', 'fallback', 'adapt',
-        'prefix', 'suffix',
-      ],
+        'prefix', 'suffix' ],
     });
     return getSrc(params)
   };
@@ -183,8 +208,7 @@ var getImageClass = function (opt) {
           'width', 'height', 'quality',
           'format', 'fallback', 'adapt',
           'prefix', 'suffix', 'defer',
-          'urlFormatter',
-        ],
+          'urlFormatter' ],
       });
     }
 
@@ -227,15 +251,20 @@ var install = function (Vue, opt) {
 
     return new Promise(function (resolve) {
       img.onload = function () {
-        setAttr(el, vImgSrc, vnode.tag);
+        setAttr(el, img.src, vnode.tag);
         resolve();
       };
-      if (vImgErr) {
-        img.onerror = function () {
+      img.onerror = function () {
+        // webp图片加载失败降级到普通图片
+        // 兼容客户端处理webp失败的情况
+        var webpReg = /format\/webp\//;
+        if (webpReg.test(img.src)) {
+          img.src = vImgSrc.replace(webpReg, '');
+        } else if (vImgErr) {
           setAttr(el, vImgErr, vnode.tag);
           resolve();
-        };
-      }
+        }
+      };
       setTimeout(function () {
         resolve();
       }, delay);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-img",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "hash2path wrapper for vue 2",
   "main": "dist/vue-img.js",
   "scripts": {

diff --git a/src/base.js b/src/base.js
@@ -1,7 +1,9 @@
+import { checkSupport } from './device'
+
 const VueImg = Object.create(null)
 
 // Check webP support
-VueImg.canWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0
+VueImg.canWebp = checkSupport() || (!![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0)
 
 // Default cdn prefix
 const protocol = location.protocol === 'https:' ? 'https://' : 'http://'

diff --git a/src/device.js b/src/device.js
@@ -0,0 +1,26 @@
+const ua = window.navigator.userAgent
+
+const isIOS = /iphone|ios|ipad|ipod/i.test(ua)
+
+const isAlipay = /AliApp\(AP\/([\d.]+)\)/i.test(ua)
+
+const compareAlipayVersion = (targetVersion) => {
+  let version = ua.match(/AlipayClient[a-zA-Z]*\/(\d+(?:\.\d+)+)/)
+  version = version && version.length ? version[1] : ''
+  version = version.split('.')
+
+  targetVersion = targetVersion.split('.')
+  for (let i = 0, n1, n2; i < version.length; i++) {
+    n1 = parseInt(targetVersion[i], 10) || 0
+    n2 = parseInt(version[i], 10) || 0
+    if (n1 > n2) return -1
+    if (n1 < n2) return 1
+  }
+
+  return 0
+}
+
+export const checkSupport = () => {
+  // only support since 10.1.0
+  return isIOS && isAlipay && compareAlipayVersion('10.1.0') >= 0
+}
diff --git a/src/directive.js b/src/directive.js
@@ -18,11 +18,16 @@ const install = (Vue, opt) => {
 
     return new Promise(resolve => {
       img.onload = () => {
-        setAttr(el, vImgSrc, vnode.tag)
+        setAttr(el, img.src, vnode.tag)
         resolve()
       }
-      if (vImgErr) {
-        img.onerror = () => {
+      img.onerror = () => {
+        // webp图片加载失败降级到普通图片
+        // 兼容客户端处理webp失败的情况
+        const webpReg = /format\/webp\//
+        if (webpReg.test(img.src)) {
+          img.src = vImgSrc.replace(webpReg, '')
+        } else if (vImgErr) {
           setAttr(el, vImgErr, vnode.tag)
           resolve()
         }