在做項目的時候烟号，遇到一個需求蹲姐，通過后端返回生成二維碼擒滑，并將頁面變成一整張圖片帆精，可以分享給微信好友等功能，當(dāng)時第一反應(yīng)怎么可以能呢嘀掸？除非后端返回圖片紫岩，前端怎么可以能把頁面變成一張圖片，但是程序員的思維告訴我大千世界睬塌，沒有什么不可能的泉蝌，抱著試一試的心態(tài)，我開始了漫長的“百度”征途揩晴，終于在各種搜索下勋陪，我終于找了一個vue的插件可以完美實現(xiàn)這個需求，簡直跪謝各路大佬硫兰。
介紹兩種生成二維碼的方法
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（最重要的一步诅愚，將頁面轉(zhuǎn)換成圖片）

npm install --save html2canvas

import html2canvas from 'html2canvas';

//html2canvas+vue-qr生成海報
<div class="posterPage">
      <!-- 生成前的dom節(jié)點 加判斷，顯示隱藏  -->
      <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是動態(tài)加載的劫映，如果你這個時候執(zhí)行轉(zhuǎn)換操作的時候還沒有加載完成，會出現(xiàn)圖片少一截的情況,所以加上一個定時器泳赋，延時轉(zhuǎn)換成canvas。避免這個問題
        setTimeout(() => {
          html2canvas(poster,{
                        allowTaint: true, //允許跨域祖今，默認(rèn)false,如果不設(shè)置這個拣技，需要后端轉(zhuǎn)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