静态页面

package-lock.json

@@ -2107,6 +2107,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npm.taobao.org/base64-arraybuffer/download/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha1-S5RPrAGRqlkHr+LYyZnMxXzoD0U="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@@ -3430,6 +3435,14 @@
       "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
       "dev": true
     },
+    "css-line-break": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npm.taobao.org/css-line-break/download/css-line-break-1.1.1.tgz",
+      "integrity": "sha1-1em90peEAJnrBQPHMQ/TSSegJu8=",
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      }
+    },
     "css-loader": {
       "version": "0.28.11",
       "resolved": "http://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz",
@@ -6633,6 +6646,14 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-rc.7",
+      "resolved": "https://registry.npm.taobao.org/html2canvas/download/html2canvas-1.0.0-rc.7.tgz?cache=0&sync_timestamp=1597041911563&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtml2canvas%2Fdownload%2Fhtml2canvas-1.0.0-rc.7.tgz",
+      "integrity": "sha1-cMFZzg5jlUqRFpUxiU0IrVYnrJg=",
+      "requires": {
+        "css-line-break": "1.1.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.3.0",
       "resolved": "http://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "exports-loader": "^0.7.0",
     "fundebug-javascript": "^2.4.2",
     "fundebug-vue": "0.0.1",
+    "html2canvas": "^1.0.0-rc.7",
     "js-md5": "^0.7.3",
     "mint-ui": "^2.2.13",
     "qrcode": "^1.4.4",

src/pages/WoDe/XiaZaiErWeiMa/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="Page">
-    <MainPageContainer @UserInfoChange="Init" :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="邀请注册">
-      <div class="PageContainer">
-        <img src="../../../assets/img/yaoqing.jpg" width="100%" alt="">
+    <MainPageContainer @UserInfoChange="Init" :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="邀请注册" :ShowMainHeaderRight="true" MainHeaderRightText="保存截图" :MainHeaderRightClick="SaveImg">
+      <div ref="PageContainer" class="PageContainer">
+        <img v-if="Base64Img !== null" :src="Base64Img" width="100%" alt="">
         <div class="centerLabel">
           <span>您的邀请码为</span>
           <span v-if="UserInfo !== null">{{UserInfo.inviteCode}}</span>
@@ -13,12 +13,15 @@
             </div>
           </div>
         </div>
+        <img v-if="CanvasImg !== null" :src="CanvasImg" class="CanvasImg" alt="">
+        <a v-if="CanvasImg !== null" ref="CanvasImgDownload" :href="CanvasImg" download="xiaoniu.jpeg"></a>
       </div>
     </MainPageContainer>
   </div>
 </template>
 
 <script>
+import html2canvas from 'html2canvas'
 import QRCode from 'qrcode'
 import MainPageContainer from '../../../components/common/MainPageContainer'
 import { createNamespacedHelpers } from 'vuex'
@@ -27,7 +30,9 @@ export default {
   name: '',
   data () {
     return {
-      QrCodeUrl: null
+      QrCodeUrl: null,
+      CanvasImg: null,
+      Base64Img: null
     }
   },
   computed: {
@@ -39,15 +44,43 @@ export default {
     MainPageContainer
   },
   created () {
+    let TargetImg = new Image()
+    TargetImg.src = require('../../../assets/img/yaoqing.jpg')
+    TargetImg.onload = () => {
+      this.Base64Img = this.GetBase64Image(TargetImg)
+    }
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
+    GetBase64Image (img) {
+      let canvas = document.createElement('canvas')
+      canvas.width = img.width
+      canvas.height = img.height
+      let ctx = canvas.getContext('2d')
+      ctx.drawImage(img, 0, 0, img.width, img.height)
+      let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
+      let dataURL = canvas.toDataURL('image/' + ext)
+      canvas.remove()
+      return dataURL
+    },
+    SaveImg () {
+      if (this.$refs.CanvasImgDownload) {
+        this.$refs.CanvasImgDownload.click()
+      }
+    },
     Init () {
       QRCode.toDataURL(`https://niucai.co/#/Register?code=${this.UserInfo.inviteCode}`).then((res) => {
         this.QrCodeUrl = res
+        let _that = this
+        window.setTimeout(() => {
+          html2canvas(this.$refs.PageContainer).then(function (canvas) {
+            document.body.appendChild(canvas)
+            _that.CanvasImg = canvas.toDataURL('image/jpeg', 1.0)
+          })
+        }, 1000)
       }).catch((res) => {
         console.log(res)
       })

src/pages/WoDe/XiaZaiErWeiMa/page.scss

@@ -7,6 +7,25 @@
     width: 100%;
     height: 100%;
     position: relative;
+    > #Base64Canvas {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: -200%;
+    }
+    > .TargetImg {
+      width: 100%;
+      display: block;
+      position: absolute;
+      left: -200%;
+    }
+    > .CanvasImg {
+      position: absolute;
+      z-index: 300;
+      width: 50%;
+      opacity: 0;
+      left: -500%;
+    }
     > div {
       z-index: 2;
       width: 70%;
@@ -26,7 +45,7 @@
         &:nth-child(2) {
           font-size: 0.2rem;
           font-weight: bold;
-          color: #ff5100;
+          color: #d91d36;
         }
         &:nth-child(3) {
           font-size: 0.12rem;