开门红图片分享功能

src/views/ebiz/goodStart/GoodStartScheme.vue

@@ -5,22 +5,29 @@
         <van-image height="200" :src="$assetsUrl + pic.picUrl" @click="prevImg(pic)" />
       </van-grid-item>
     </van-grid>
+    <van-image-preview id="preview" v-model="isPrevShow" :images="images" />
+    <van-button class="share-btn" v-show="isPrevShow" type="danger" block @click="shareImg">分享</van-button>
   </div>
 </template>
 
 <script>
 import { Grid, GridItem, Image as VanImage, ImagePreview } from 'vant'
 import { getSchemePics } from '@/api/ebiz/goodStart'
+import Vue from 'vue'
+
+// 全局注册
+Vue.use(ImagePreview)
 export default {
   components: {
     [Grid.name]: Grid,
     [GridItem.name]: GridItem,
-    [VanImage.name]: VanImage,
-    [ImagePreview.name]: ImagePreview
+    [VanImage.name]: VanImage
   },
   data() {
     return {
-      pics: []
+      isPrevShow: false,
+      pics: [],
+      images: []
     }
   },
   created() {
@@ -37,7 +44,31 @@ export default {
       }
     },
     prevImg(pic) {
-      ImagePreview([this.$assetsUrl + pic.picUrl])
+      this.isPrevShow = true
+      this.images = [this.$assetsUrl + pic.picUrl]
+    },
+    shareImg() {
+      const img = this.getImageBase64()
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('bridge', {
+        flag: 'share',
+        extra: {
+          shareType: '1',
+          img
+        }
+      })
+    },
+    getImageBase64() {
+      const img = document.querySelector('#preview .van-image__img')
+      img.setAttribute('crossOrigin', 'anonymous')
+      var canvas = document.createElement('canvas')
+      canvas.width = img.width
+      canvas.height = img.height
+      var ctx = canvas.getContext('2d')
+      ctx.drawImage(img, 0, 0, img.width, img.height)
+      var dataURL = canvas.toDataURL('image/png')
+      canvas = null
+      return dataURL
     }
   }
 }
@@ -51,4 +82,14 @@ export default {
 /deep/ .van-grid-item__content {
   padding: 5px;
 }
+
+.share-btn {
+  position: fixed;
+  bottom: 0;
+  z-index: 10000;
+}
+
+/deep/ .van-image-preview__image {
+  bottom: auto;
+}
 </style>