qrcode: Support prop type for rendering as img. Close #900

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,13 +30,22 @@ export default {
     fgColor: {
       type: String,
       default: '#000000'
+    },
+    type: {
+      type: String,
+      default: 'img'
     }
   },
   mounted () {
     this.$nextTick(() => {
       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')
+      }
     }
   }
 }

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'

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: