将整个html网页生成图片

1 

<!--
 * @Description: 
 * @Author: 熊成强
 * @Date: 2019-06-25 14:21:15
 * @LastEditTime: 2019-09-27 16:39:54
 * @LastEditors: xcq
 -->
<template>
  <div class="shareParent">
    <div class="share" id="share" ref="share" v-show="firstFlag">
      <div class="share-header">
        <div class="share-header-left">
          <img src="/static/home/header.png" alt />
        </div>
        <div class="share-header-right">
          <span class="share-header-right-zi">179***9064邀请你免费领</span>
        </div>
      </div>
      <div class="share-lq a" style>
        <img @touch.prevent src="/static/share/header.png" alt />
      </div>
      <div class="share-lq">
        <img @touch.prevent src="/static/share/wenzi.png" alt />
      </div>
      <div class="share-lq">
        <img @touch.prevent src="/static/share/hua.png" alt />
        <div class="share-lq-qr">
          <qrcode class="qr" />
          <div class="share-lq-qr-xiazai">扫码下载 Starteos App 钱包</div>
        </div>
      </div>
    </div>

    <img class="show-img" style="width:100%;" :src="dataURL" alt v-show="!firstFlag" />
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import qrcode from "$com/st/qr"
export default {
  components: { qrcode },
  data () {
    return {
      firstFlag: true,
      dataURL: ''
    }
  },
  async mounted () {
    const that = this
    that.$nextTick(function () {
      setTimeout(() => {
        that.toImg()
        console.log('setTimeout: ');
      }, 5000)
    })

  },
  created () {
    // this.imgSRC = window.location.href
    this.firstFlag = true

  },
  computed: {

  },
  watch: {
  },
  destroyed () {

  },
  methods: {
    toImg () {
      const that = this
      // document.querySelector('#share')
      html2canvas(this.$refs.share).then(canvas => {
        let imgUrl = canvas.toDataURL('image/png');
        console.log('imgUrl: ', imgUrl);
        that.dataURL = imgUrl;
        that.firstFlag = false;
      }).catch(error => {
      })
    },

  }
}
</script>
<style lang="scss">
// @import "./share.scss";
#app {
  .shareParent {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .share {
    width: 100%;
    // height: 100%;
    background: url("/static/share/bg.png") no-repeat center;
    background-size: cover;
    &-header {
      box-sizing: border-box;
      width: 100%;
      height: 60px;
      padding: 15px;
      @extend .flex;
      justify-content: flex-start;
      &-left {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-right: 15px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-right {
        font-size: 16px;
        color: #fff;
      }
    }
    .a {
      margin-bottom: 65px;
    }
    &-lq {
      width: 100%;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      &-qr {
        width: 100%;
        @extend .flex;
        flex-direction: column;
        align-items: center;

        position: absolute;
        left: 0;
        right: 0;
        top: 15px;
        margin: auto;
        .qr {
          width: 125px;
        }
        &-xiazai {
          font-size: 12px;
          margin: 6px 0 0 0;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
}
</style>

2 

<template>
  <div>
    <vue-qr :logoSrc="imageUrl" :text="codeValue" :logoScale="35" :margin="4" :size="size"></vue-qr>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
  props: {
    codeValue: {
      type: String,
      default: "https://www.starteos.io/"
    },
    size: {
      type: Number,
      default: 125
    }
  },
  data () {
    return {
      imageUrl: '/static/share/logo.png',//默认二维码中间图片
    }
  },
  components: {
    VueQr
  }
}
 </script>

3