From aa6a684e3591878b540d3e7cfe44de6323121427 Mon Sep 17 00:00:00 2001
From: levy <levy9527@qq.com>
Date: Sat, 16 Jan 2021 17:36:43 +0800
Subject: [PATCH] fix: set quality 80 and can turn off webp transformation
 (#43)

---
 docs/basic.md                |  8 +++++---
 docs/directive.md            |  5 ++++-
 src/directive.js             | 17 ++++++++++-------
 src/provider-config.js       | 10 ++++++++--
 src/v-img.vue                | 11 +++++++++--
 test/provider-config.spec.js | 32 +++++++++++++++++++-------------
 6 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/docs/basic.md b/docs/basic.md
index 59aa933..fe8bedd 100644
--- a/docs/basic.md
+++ b/docs/basic.md
@@ -15,6 +15,8 @@ these features are out of box:
     <div v-for="_ in 2" class="padding" :style="{height}">height: {{height}}</div>
     <button @click="i = +!i">点击切换src</button>
     <v-img :src="srcs[i]" width="100"/>
+    <p>可以选择关闭webp转换</p>
+    <v-img :src="srcs[0]" width="100" :webp="false"/>
   </div>
 </template>
 
@@ -35,9 +37,9 @@ export default {
 
 <style>
 .padding {
-  background-color: green; 
-  color: white; 
-  font-size: 50px; 
+  background-color: green;
+  color: white;
+  font-size: 50px;
   border: 1px solid yellow;
 }
 </style>
diff --git a/docs/directive.md b/docs/directive.md
index a984d4e..f127886 100644
--- a/docs/directive.md
+++ b/docs/directive.md
@@ -9,7 +9,10 @@ use `v-img` directive, can let background-image to use webp。
 
 ```vue
 <template>
-  <div v-img="{src}" style="width:100px;height:100px;background-repeat:no-repeat;" />
+  <div>
+    <div v-img="{src}" style="width:100px;height:100px;background-repeat:no-repeat;" />
+    <div v-img="{src, webp: false}" style="width:100px;height:100px;background-repeat:no-repeat;" />
+  </div>
 </template>
 
 <script>
diff --git a/src/directive.js b/src/directive.js
index 0253d4e..e000df9 100644
--- a/src/directive.js
+++ b/src/directive.js
@@ -2,11 +2,6 @@ import getImageSrc from './provider-config'
 import ua from './ua'
 
 function getSrc(config) {
-  // TODO only simply check in sync way
-  const isSupportWebp =
-    ua.isSupportWebp(navigator.userAgent) ||
-    JSON.parse(localStorage.getItem('isSupportWebp')) ||
-    false
   const {
     provider = 'alibaba',
     extraQuery,
@@ -15,9 +10,17 @@ function getSrc(config) {
     height,
     autocrop = true,
     preferHttps = true,
+    webp = true,
   } = config
-  if (!src) {
-    return
+  if (!src) return
+
+  let isSupportWebp = false
+  if (webp) {
+    // TODO only simply check in sync way
+    isSupportWebp =
+      ua.isSupportWebp(navigator.userAgent) ||
+      JSON.parse(localStorage.getItem('isSupportWebp')) ||
+      false
   }
 
   return getImageSrc({
diff --git a/src/provider-config.js b/src/provider-config.js
index 38122ac..912f4a5 100644
--- a/src/provider-config.js
+++ b/src/provider-config.js
@@ -2,6 +2,12 @@ const png = /\.png(\?.*)?$/
 const jpg = /\.jpe?g(\?.*)?$/
 const webp = /\.webp(\?.*)?$/
 const svg = /\.svg(\?.*)?$/
+/**
+ * https://helpx.adobe.com/hk_en/experience-manager/6-3/assets/using/best-practices-for-optimizing-the-quality-of-your-images.html
+ * https://sirv.com/help/articles/jpeg-quality-comparison/#use-sirv-to-find-the-perfect-quality
+ */
+export const quality = 80
+
 function is(types, src) {
   return Array.isArray(types) ? types.some(t => t.test(src)) : types.test(src)
 }
@@ -52,7 +58,7 @@ export const providerConfig = {
        * 质量变换仅对jpg、webp有效。（png已被转为webp）
        * @see https://help.aliyun.com/document_detail/44705.html?spm=a2c4g.11186623.6.1256.347d69cb9tB4ZR
        */
-      if (is([png, jpg, webp], src)) query += '/quality,Q_75'
+      if (is([png, jpg, webp], src)) query += `/quality,Q_${quality}`
 
       vm.$src = query
       return vm
@@ -125,7 +131,7 @@ export const providerConfig = {
         return vm
       }
       if (isSupportWebp && is([png, jpg], src)) query += '/format/webp'
-      query += '/quality/75'
+      query += `/quality/${quality}`
 
       vm.$src = query
       return vm
diff --git a/src/v-img.vue b/src/v-img.vue
index 1946ada..7c09608 100644
--- a/src/v-img.vue
+++ b/src/v-img.vue
@@ -109,6 +109,13 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * 是否使用webp
+     */
+    webp: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -184,8 +191,8 @@ export default {
   },
 
   beforeMount() {
-    this.checkLayout()
-    this.checkSupportWebp()
+    // this.checkLayout()
+    this.webp && this.checkSupportWebp()
   },
 
   methods: {
diff --git a/test/provider-config.spec.js b/test/provider-config.spec.js
index 4d8ae4c..553bb6c 100644
--- a/test/provider-config.spec.js
+++ b/test/provider-config.spec.js
@@ -1,10 +1,10 @@
-import _getSrc from '../src/provider-config'
+import _getSrc, {quality} from '../src/provider-config'
 
 const getSrc = val => _getSrc(val).$src
 const getUncroppedSrc = val => _getSrc(val).$uncroppedSrc
 
 describe('alibaba', () => {
-  const defaultQuery = '?x-oss-process=image/quality,Q_75'
+  const defaultQuery = `?x-oss-process=image/quality,Q_${quality}`
   const src = 'http://image-demo.oss-cn-hangzhou.aliyuncs.com/panda.png'
   const relative = '//image-demo.oss-cn-hangzhou.aliyuncs.com/panda.png'
   const https = 'https://image-demo.oss-cn-hangzhou.aliyuncs.com/panda.png'
@@ -60,7 +60,7 @@ describe('alibaba', () => {
         src,
         isSupportWebp: true,
       })
-    ).toBe(`${src}?x-oss-process=image/format,webp/quality,Q_75`)
+    ).toBe(`${src}?x-oss-process=image/format,webp/quality,Q_${quality}`)
   })
   test('浏览器不支持webp', () => {
     expect(
@@ -102,7 +102,9 @@ describe('alibaba', () => {
         isSupportWebp: true,
         extraQuery,
       })
-    ).toBe(`${src}?x-oss-process=image/format,webp/quality,Q_75/${extraQuery}`)
+    ).toBe(
+      `${src}?x-oss-process=image/format,webp/quality,Q_${quality}/${extraQuery}`
+    )
   })
 
   test('自动裁剪，只传 width', () => {
@@ -114,7 +116,9 @@ describe('alibaba', () => {
         autocrop: true,
         width: 100,
       })
-    ).toBe(`${src}?x-oss-process=image/resize,w_200/format,webp/quality,Q_75`)
+    ).toBe(
+      `${src}?x-oss-process=image/resize,w_200/format,webp/quality,Q_${quality}`
+    )
   })
   test('自动裁剪，只传 height', () => {
     expect(
@@ -125,7 +129,9 @@ describe('alibaba', () => {
         autocrop: true,
         height: 100,
       })
-    ).toBe(`${src}?x-oss-process=image/resize,h_200/format,webp/quality,Q_75`)
+    ).toBe(
+      `${src}?x-oss-process=image/resize,h_200/format,webp/quality,Q_${quality}`
+    )
   })
   test('自动裁剪，height 和 width 都传', () => {
     expect(
@@ -138,7 +144,7 @@ describe('alibaba', () => {
         width: 100,
       })
     ).toBe(
-      `${src}?x-oss-process=image/resize,m_fill,h_200,w_200/format,webp/quality,Q_75`
+      `${src}?x-oss-process=image/resize,m_fill,h_200,w_200/format,webp/quality,Q_${quality}`
     )
   })
   test('自动裁剪，height 和 width 都不传', () => {
@@ -149,7 +155,7 @@ describe('alibaba', () => {
         isSupportWebp: true,
         autocrop: true,
       })
-    ).toBe(`${src}?x-oss-process=image/format,webp/quality,Q_75`)
+    ).toBe(`${src}?x-oss-process=image/format,webp/quality,Q_${quality}`)
   })
 
   test('获取不经过裁剪的 url', () => {
@@ -162,7 +168,7 @@ describe('alibaba', () => {
         height: 100,
         width: 100,
       })
-    ).toBe(`${src}?x-oss-process=image/format,webp/quality,Q_75`)
+    ).toBe(`${src}?x-oss-process=image/format,webp/quality,Q_${quality}`)
   })
 
   test('测试 src 为空', () => {
@@ -191,7 +197,7 @@ describe('qiniu', () => {
         src,
         isSupportWebp: true,
       })
-    ).toBe(`${src}?imageMogr2/format/webp/quality/75`)
+    ).toBe(`${src}?imageMogr2/format/webp/quality/${quality}`)
   })
   test('浏览器不支持webp', () => {
     expect(
@@ -200,7 +206,7 @@ describe('qiniu', () => {
         src,
         isSupportWebp: false,
       })
-    ).toBe(`${src}?imageMogr2/quality/75`)
+    ).toBe(`${src}?imageMogr2/quality/${quality}`)
   })
   test('浏览器支持webp，但图片不是(png|jpe?g)', () => {
     const webp = src.replace('jpg', 'webp')
@@ -210,7 +216,7 @@ describe('qiniu', () => {
         src: webp,
         isSupportWebp: true,
       })
-    ).toBe(`${webp}?imageMogr2/quality/75`)
+    ).toBe(`${webp}?imageMogr2/quality/${quality}`)
   })
   test('svg不处理', () => {
     const svg = src.replace('jpg', 'svg')
@@ -225,7 +231,7 @@ describe('qiniu', () => {
         isSupportWebp: true,
         extraQuery,
       })
-    ).toBe(`${src}?imageMogr2/format/webp/quality/75/${extraQuery}`)
+    ).toBe(`${src}?imageMogr2/format/webp/quality/${quality}/${extraQuery}`)
   })
 })