動態生成二維碼並利用canvas合成出一張圖片(類似海報、分享頁)

在前端開發並打算推廣一個APP的時候，推廣頁是免不了的，而推廣頁的展示方式一般是給人家一個二維碼，讓別人自己去安裝APP，這樣前段任務也達到了，這次寫這篇文章的原因主要還是總結一下，其中有很多不完善的地方，還是請各位指教了:-）。

為了做出一張讓人滿意分享頁，頁面上的數據有些當然是需要動態展示的，具體展示效果如下圖(部分內容不便展示，見諒)：

下面說下需要用到的工具，就兩個：

1.能動態生成二維碼的插件qrcode  2.canvas畫布

因為小編用的vue框架具體引入為：

import qrcode from '@xkeshi/vue-qrcode'　　

可以看到效果圖上的數據展示部分一個是二維碼一個是我的用戶名，下面我們開始上代碼。

html:

<qrcode tag="img"  id="img" :value="qrCodeUrl" :options="{ size: 120 }" name="img"></qrcode>
      <canvas id="myCanvas" width="400vw" height="711vw"></canvas>
      <img :src="newSrc" class="newImage" v-if="newSrc" id="newImage">

　　

為何多加了一個空圖片呢？是為了把最后合成的圖片canvas變為img圖片格式，這樣就可以進行處理長按識別、保存圖片等處理了。

js:　

created: function () {
      if (this.qrImg == '' || this.qrImg == null) {
        if (vueCookie.get('nickname')) {
          this.recommendCode = vueCookie.get('userID')
          this.nickname = vueCookie.get('nickname') + '邀您加入'
          this.qrCodeUrl = "您要存放的二維碼信息"
          setTimeout(function () {
            that.drawImage()
          }, 100)
        } else {
          request.get('/ffq/user',{}).then((response) => {
            let responseData = response.data.data
            this.nickname = responseData.nickname + '邀您加入'
            let recommendCode = responseData.recommend_code
            this.recommendCode = responseData.user_id
            this.qrCodeUrl = "您要存放的二維碼信息" 
            setTimeout(function () {
              that.drawImage()
            }, 100)
          }).catch((ex) => {
            this.$router.push({name: 'Login'})
          })
        }
      }
    },

上面這段代碼是展示我們動態設置的二維碼信息及緩存我的個人信息(這部分看個人隨意添加就不注重說明了)。

下面開始就是重點了--------->>>>將背景圖與生成的二維碼合成展示為一張圖片。

methods{
   drawImage() {
          let canvas1 = document.getElementsByTagName('canvas')[0]
          let canvas2 = document.getElementById('myCanvas')
          let cans = document.getElementById('img')
          let cas1 = canvas1.getContext('2d')
          let cas2 = canvas2.getContext('2d')
          let img1 = new Image()
          let img2 = new Image()
          // img1.src = canvas1.toDataURL('images/png', 1)
          img1.src = cans.src;
          img2.src = '/static/images/qr-code.png'
          var that = this
          img2.onload = function () {
            cas2.drawImage(img2, 0, 0, 400, 712)
            cas2.font = '20px Georgia'
            cas2.textAlign = 'center'
            cas2.fillStyle = 'white';
            cas2.fillText(that.nickname, 200, 630);
            cas2.drawImage(img1, 104, 378, 194, 194);
            that.newSrc = canvas2.toDataURL('images/png', 1)
      }
}

　首先進行下代碼說明，前面定義的canvas1、canvas2是一張圖片，是為了后面可以合成圖片，之后隱藏的路徑開始時是可以的，后來不知怎的就找不到了，預算就用了最原始的獲取路徑，剩下的就是作圖了，當背景圖加載好的時候把二維碼按照位置畫上去就行了，但是，我們得出的最終圖片是canvas類型的，這個部分在我測試的時候長按並不會出現任何反應，最后的一行代碼是我的解決方案，有其他的方案或者我有出錯的地方，歡迎指教！！！。