Vueではcanvasで二次元コードと画像合成ポスターを実現する方法

プロジェクトの中でよく出会うことがあります。異なるQRコードを共通の画像に載せて、ユーザーのダウンロードを提供します。
簡単に言えば、canvasを利用して同じ比率の二次元コードを画像に重ねてポスターを生成することです。
1.対応する比率を設定する
一般的にポスターの背景は固定されています。直接にpublicフォルダに置くことができます。二次元コードはバックグラウンドによってデータを返すことができます。canvasで生成することもできます。ここでは詳細には説明しません。

import posterBgImg from '../public/images/poster_bg.png';//     
import qrcodeImg from '../public/images/qrcode.png';//    
export default{
  name: 'qrcode-in-poster',
  data(){
    return {
      posterBgImg,
      qrcodeImg,
      posterSize: 930/650,//       
      qrCodeSize: {//            =》               
        width: 270/650,
        height: 270/930,
        left: 190/650,
        top: 448/650
      },
      poster: '',//     
    }
  }
};

2.スクリーン幅を取得する
モバイル端末の最大幅は480 pxに制限されています。

computed: {
  screenWidth(){
    let w = document.body.clientWidt || document.documentElement.clientWidth || 375;
    return w > 480 ? 480 : w ;
  }
};

3.コンビネーションイメージ

methods: {
  combinedPoster(_url){
    let that = this,
      qrcode = this.qrcodeImg; //      
  
    console.log("open draw: ", _url, qrcode)
    let base64 = '',
      canvas = document.createElement('canvas'),
      ctx = canvas.getContext("2d"),
      _w = this.screenWidth * 2, //     ：        retina ，      ，     2 ，            ，                
      _h = this.posterSize * _w, //     
      _qr_w = this.qrCodeSize.width * _w, //      =    *   
      _qr_h = this.qrCodeSize.height * _h, //      =    *   
      _qr_t = this.qrCodeSize.top * _w, //         =    *   
      _qr_l = this.qrCodeSize.left * _w; //         =    *   
    //   canvas    
    canvas.width = _w; 
    canvas.height = _h;
    ctx.rect(0, 0, _w, _h);
    ctx.fillStyle = '#fff'; //     
    ctx.fill();
    //     ：    （  ）+    （   ）
    // file：  ，size：[    ，    ，  ，  ]
    let _list = [ 
      {
        file: _url,
        size: [0, 0, _w, _h]
      }, {
        file: qrcode,
        size: [_qr_l, _qr_t, _qr_w, _qr_h]
      }
    ];
    //     
    let drawing = (_index) => {
      //        =》        
      if (_index < _list.length) {
        //          
        let img = new Image(),
          timeStamp = new Date().getTime();
        //     
        img.setAttribute('crossOrigin', 'anonymous')
        //        
        img.src = _list[_index].file + '?' + timeStamp
        img.onload = function() {
          //   
          ctx.drawImage(img, ..._list[_index].size)
          //   _list
          drawing(_index + 1)
        }
      } else {
        //     
        base64 = canvas.toDataURL("image/png")
        if (base64) {
          //        
          this.$set(that, 'poster', base64)
        }
      }
    }
    drawing(0)
  }
};
mounted(){
  //          
  this.draw(this.posterBgImg)
}

4.ダウンロード
クリックして合成画像をダウンロードします。

methods: {
  handleDownload(){
    if(this.poster){
      let a = document.createElement("a");
      a.setAttribute("download", "    -"+(new Date().getTime()));
      a.href = this.poster
      a.click()
    }else{
      console.log("     ，     ！")
    }
  }
}

tips：WeChatブラウザには適用されず、ユーザーに長押し保存を提示するしかない。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。