From af9aa2bf17850e6b1a29710a32f330323852886c Mon Sep 17 00:00:00 2001
From: airyland <airyland@qq.com>
Date: Mon, 13 Feb 2017 14:07:30 +0800
Subject: [PATCH] qrcode: Support prop type for rendering as img. Close #900

---
 src/components/qrcode/index.vue | 21 ++++++++++++++++++---
 src/components/qrcode/metas.yml |  9 +++++++++
 src/demos/Qrcode.vue            | 13 +++++++++----
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/qrcode/index.vue b/src/components/qrcode/index.vue
index e3240a319..d6c0e3315 100755
--- a/src/components/qrcode/index.vue
+++ b/src/components/qrcode/index.vue
@@ -1,8 +1,11 @@
 <template>
-  <canvas
+  <div>
+    <canvas
   :style="{height: size, width: size}"
   :height="size"
-  :width="size"></canvas>
+  :width="size" v-show="type === 'canvas'" ref="canvas"></canvas>
+    <img :src="imgData" v-if="type === 'img'">
+  </div>
 </template>
 
 <script>
@@ -27,6 +30,10 @@ export default {
     fgColor: {
       type: String,
       default: '#000000'
+    },
+    type: {
+      type: String,
+      default: 'img'
     }
   },
   mounted () {
@@ -34,6 +41,11 @@ export default {
       this.render()
     })
   },
+  data () {
+    return {
+      imgData: ''
+    }
+  },
   watch: {
     value () {
       this.render()
@@ -57,7 +69,7 @@ export default {
       qrcode.addData(this.value)
       qrcode.make()
 
-      const canvas = this.$el
+      const canvas = this.$refs.canvas
 
       const ctx = canvas.getContext('2d')
       const cells = qrcode.modules
@@ -75,6 +87,9 @@ export default {
           ctx.fillRect(Math.round(cdx * tileW), Math.round(rdx * tileH), w, h)
         })
       })
+      if (this.type === 'img') {
+        this.imgData = canvas.toDataURL('image/png')
+      }
     }
   }
 }
diff --git a/src/components/qrcode/metas.yml b/src/components/qrcode/metas.yml
index ab33a0dca..d13086ac5 100755
--- a/src/components/qrcode/metas.yml
+++ b/src/components/qrcode/metas.yml
@@ -24,3 +24,12 @@ props:
     default: '#000000'
     en: front color
     zh-CN: 二维码着色
+  type:
+    type: String
+    default: img
+    en: 'render type, can be `img` or `canvas`'
+    zh-CN: '渲染类型，可以为`img`(适合需要在微信需要长按识别的场景)和`canvas`'
+changes:
+  v2.1.0-rc.47:
+    zh-CN:
+      - '[feature] 支持渲染类型为图片 #900 @keepgoingwm'
\ No newline at end of file
diff --git a/src/demos/Qrcode.vue b/src/demos/Qrcode.vue
index cbdfef8fd..e1f892b81 100755
--- a/src/demos/Qrcode.vue
+++ b/src/demos/Qrcode.vue
@@ -1,9 +1,12 @@
 <template>
   <div style="text-align:center;margin-top:15px;">
-    <divider>{{ $t('Notice: It cannot be extracted by Wechat') }}</divider>
-    <qrcode value="https://vux.li"></qrcode>
+    <divider>{{ $t('default type = img') }}</divider>
+    <qrcode value="https://vux.li?x-page=demo_qrcode" type="img"></qrcode>
     <br>
     <br>
+    <divider>{{ $t('type = canvas') }}</divider>
+    <qrcode value="https://vux.li?x-page=demo_qrcode"></qrcode>
+    <br>
     <qrcode :value="value" :fg-color="fgColor"></qrcode>
     <br>
     <span>{{ $t('current url') }}: {{value}}</span>
@@ -13,8 +16,10 @@
 </template>
 
 <i18n>
-'Notice: It cannot be extracted by Wechat':
-  zh-CN: 注意：canvas不能在微信里长按识别
+default type = img:
+  zh-CN: '默认类型为 img，可以在微信里长按识别'
+type = canvas:
+  zh-CN: '类型为 canvas'
 current url:
   zh-CN: 当前url
 current fgColor: