在做项目的时候，遇到一个需求，通过后端返回生成二维码，并将页面变成一整张图片，可以分享给微信好友等功能，当时第一反应怎么可以能呢？除非后端返回图片，前端怎么可以能把页面变成一张图片，但是程序员的思维告诉我大千世界，没有什么不可能的，抱着试一试的心态，我开始了漫长的“百度”征途，终于在各种搜索下，我终于找了一个vue的插件可以完美实现这个需求，简直跪谢各路大佬。
介绍两种生成二维码的方法
QRcode
vue-qr
vue-qr比QRcode功能多在可以在中间加logo

QRcode使用方法

步骤一引入插件：

npm install qrcodejs2 

步骤二在所需页面引用：

import QRCode from 'qrcodejs2'

<div class="qrcode" ref="qrCodeUrl"></div>
<script>
methods: {
creatQrCode() {
  var qrcode = new QRCode(this.$refs.qrCodeUrl, {
      text: 'xxxx',
      width: 100,
      height: 100,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H
 })
},
}
 
mounted() {
       this.creatQrCode();
    },
</script>

vue-qr使用方法

npm install vue-qr --save

<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
<script>
  import vueQr from 'vue-qr'
  export default {
    name: "qecode",
    data() {
      return {
        imageUrl: require("../assets/logo.png"),
      }
    },
    components: {
      vueQr
    },
    },
  }
</script>

html2canvas（最重要的一步，将页面转换成图片）

npm install --save html2canvas

import html2canvas from 'html2canvas';

//html2canvas+vue-qr生成海报
<div class="posterPage">
      <!-- 生成前的dom节点 加判断，显示隐藏  -->
      <div v-if="!posterDataUrl"  id="poster" class="relative" style="position: relative">
        <img class="poster-bg" src="../../img/share/7.png" alt="海报背景" />
        <vue-qr class="qr" :dotScale="1"  :correctLevel="1" :margin="0" :logoSrc="downloadData.icon"  :text="downloadData.url" :size="80"></vue-qr>
      </div>
      <!-- 生成后的海报 -->
      <img v-else :src="posterDataUrl" class="poster-bg" />
    </div>

js:

zhuan() {
        let canvas = document.getElementById('qrCode-canvas')
        let poster = document.getElementById('poster')
// 兼容小屏幕的手机  解决一屏显示海报不完整BUG
 window.pageYOffset = 0;
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0

// 因为html是动态加载的，如果你这个时候执行转换操作的时候还没有加载完成，会出现图片少一截的情况,所以加上一个定时器，延时转换成canvas。避免这个问题
        setTimeout(() => {
          html2canvas(poster,{
                        allowTaint: true, //允许跨域，默认false,如果不设置这个，需要后端转base64,不然会生成图片会是一张白的空白图片
                        useCORS: true, // 不知道干嘛的
                        backgroundColor: null // 解决生成的图片有白边
                    }).then(canvas => {
            this.posterDataUrl = canvas.toDataURL()
          });
        }, 1000);
      },

最后一张完美的二维码海报就生成了。（html2canvas文档地址:http://html2canvas.hertzen.com/configuration）

u=3147538946,3847892972&fm=26&gp=0.jpg