生成专属二维码海报(vue项目)

需求

把背景图和生成的带有id的二维码图片合成一张海报,提供给客户扫码进入网页

//因为分享是需要带id给予奖励的所以我这边做了是否登入的判断
handleClickShare() {
        if (this.$store.state.token) {//登入后才会弹出弹框
          this.show5 = true
          setTimeout(() => {
            let url = this.url + `?id=${this.$store.state.information._id}`//把特定的客户id带入
            QRCode.toDataURL(url, (err, url) => { //利用插件QRCode把链接生成图片
              const ownerurl = this.$store.state.information.headimgurl 
              this.drawAndShareImage(bgImage, url, ownerurl)//背景图,二维码,客户的头像
            })
          }, 10);
        } else {
          return Toast('请先登录!')
        }
//核心代码三张图片合成一张,可以做两张合成一张,我这边是为了把客户的头像带入到二维码最中心,再把合成的图片和海报合成才用了三合一
drawAndShareImage(img1, img2, img3) {
        let canvas = document.createElement("canvas");
        let width = 640;
        let height = 960;
        canvas.width = width;
        canvas.height = height;
        let context = canvas.getContext("2d");

        context.rect(0, 0, canvas.width;
        canvas.height = height;
        let context = canvas.getContext("2d");

        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "#fff";
        context.fill();

        let myImage = new Image();
        myImage.src = img1; //背景图片  你自己本地的图片或者在线图片
        myImage.crossOrigin = "Anonymous";

        myImage.onload = function () {
          context.drawImage(myImage, 0, 0, width, height);
          let myImage2 = new Image();
          myImage2.src = img2; //你自己本地的图片或者在线图片
          myImage2.crossOrigin = "Anonymous";
          let x = 450,
            y = 780
          myImage2.onload = function () {
            context.drawImage(myImage2, x, y, 150, 150);
            let myImage3 = new Image();
            myImage3.src = img3; //你自己本地的图片或者在线图片
            myImage3.crossOrigin = "Anonymous";
            myImage3.onload = function () {context.drawImage(myImage3, x + 59, y +       58, 35, 35);
              let base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
              window.base64 = base64;
              let img = document.getElementById("avatar");
              //   document.getElementById("avatar").src = base64;
              let img = document.getElementById("avatar");
              //   document.getElementById("avatar").src = base64;
              img.setAttribute("src", window.base64);
            }
          };
        };
      },

这是合成后的图片!!

image.png

其实是三个图片合成一个的,当然有些小伙伴说可以拿定位做啊
确实可以拿定位做,看需求吧,这样做事为了只有一张图片,可以做图片的保存,如果是定位做的话是三张图片!

总结来说这里两个个知识点
1.利用Qrcode生成图片
2.多张图片的合成为一张图片