Applet canvas generate sharing Poster

Finished product rendering ： Put the QR code and picture together on a picture . You can scan the following small code to experience .

The location is on the front page of the applet - Upper right corner - Generate Poster .

I made a picture switch .

 

<!--pages/test/canvas.wxml-->
<block  wx:if="{
   {urls}} ===../../../images/qrbg.png">
<image src='{
   {qrcode}}' class='bgs2' hidden='{
   {!hidden}}'></image>
<image src='{
   {bg}}' class='bgs' hidden='{
   {!hidden}}'></image>
</block>
<!--  The canvas size is customized on demand   Here I set it according to the size of the background picture   -->
<canvas canvas-id="shareImg" hidden='{
   {cvsdis}}'  style="width:750px;height:1136px"></canvas>
<!--  The preview area   -->
<view hidden='{
   {hidden}}' class='preview'>
  <image src='{
   {prurl}}' class='bcimg' bindtouchstart='timestart' bindtouchend='timeend' bindtap='saveImg'></image>
  <button type='primary' size='mini' bindtap='save'> Save to album </button>
</view>
<view class='share'  bindtap='qie'> Change the style </view>
<button class='share2' type='primary' bindtap='share' disabled='{
   {cvsdis}}'> Generate share map </button>

/* pages/canvas/canvas.wxss */
page{
  background: #ededed;
}
canvas{
  position: fixed;
  top: 0;
  left: 800rpx;
}
.share{
  position: fixed;
  bottom: 0;
  width: 50%;
  left:0;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 0;
  background: #fff;
  color: #42b035;
  text-align: center;
}
.share2{
  position: fixed;
  bottom: 0;
  width: 50%;
  right: 0;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 0
}
.preview {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.9);
  position: absolute;
  z-index: 2;
}
.preview image{
  width: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 3;
  border: 1px dashed #fff;
}
.bcimg{
  position: absolute;
  width: 70%;
  height: 76%;
  top: 0;
}
.preview button{
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 100rpx;
  line-height: 100rpx;
  left: 0;
  border-radius: 0;
  z-index: 999999;
}
.bgs{
  width: 600rpx;
  height: 1050rpx;
  position: fixed;
  top: 0;
  left: 75rpx;
}
.bgs2{
  width: 160rpx;
  height: 160rpx;
  position: fixed;
  top: 860rpx;
  right: 100rpx;
  z-index: 9999;
}

var app = getApp();
Page({
  data: {
    hidden: true,
    numbers:1,
    i: 0,
    img_url:' Address of the interface ',
    cvsdis:true,
  },
  onShow: function (options) {
    var that = this;
    request.request(
      'mp_qrcode', {
        bg: that.data.numbers,
      },
      function (res) {
        if (res.data.err == 0) {
          that.setData({
            bg: that.data.img_url + res.data.data.bg,
            qrcode: that.data.img_url + res.data.data.qrcode,
            numbers: that.data.numbers + 1,
          })
          let promise1 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: that.data.img_url + res.data.data.qrcode,
              success: function (res) {
                resolve(res);
              }
            })
          });
          let promise2 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: that.data.img_url + res.data.data.bg,
              success: function (res) {
                resolve(res);
              }
            })
          });
          Promise.all([
            promise1, promise2
          ]).then(res => {
            console.log(' Look before splicing 1', res)
            const ctx = wx.createCanvasContext('shareImg')
            // The main thing is to calculate the position of each picture and text 
            ctx.drawImage(res[0].path, 521, 930, 198, 172)
            ctx.drawImage(res[1].path, 0, 0, 750, 1136)
            ctx.stroke()
            ctx.draw()
            that.setData({
              cvsdis: false
            })
          })
        }
      }
    )
    
  },

  qie: function () {
    var that = this;
    var i = that.data.i
    that.setData({
      cvsdis: true
    })
    request.request(
      'mp_qrcode', {
        bg: that.data.numbers,
      },
      function (res) {
        console.log(res.data);
        if (res.data.err == 0) {
          that.setData({
            bg: that.data.img_url + res.data.data.bg,
            qrcode: that.data.img_url + res.data.data.qrcode,
            numbers: that.data.numbers + 1,
          })
          let promise1 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: that.data.img_url + res.data.data.qrcode,
              success: function (res) {
                resolve(res);
              }
            })
          });
          let promise2 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: that.data.img_url + res.data.data.bg,
              success: function (res) {
                resolve(res);
              }
            })
          });
          Promise.all([
            promise1, promise2
          ]).then(res => {
            console.log(' Look before splicing 2', res)
            const ctx = wx.createCanvasContext('shareImg')
            // The main thing is to calculate the position of each picture and text 
            ctx.drawImage(res[0].path, 521, 930, 198, 172)
            ctx.drawImage(res[1].path, 0, 0, 750, 1136)
            ctx.stroke()
            ctx.draw()
            that.setData({
              cvsdis:false
            })
          })
        }
      }
    )
  },
  /**
   *  Generate share map 
  */
  share: function () {
    var that = this
    wx.showLoading({
      title: ' Effort generation ...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 740,
      height: 1334,
      destWidth: 740,
      destHeight: 1334,
      canvasId: 'shareImg',
      success: function (res) {
        that.setData({
          prurl: res.tempFilePath,
          hidden: false
        })
        console.log(' Living '+that.data.prurl);
        wx.hideLoading()
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },

  /**
   *  Save to album 
  */
  timestart: function (e) {
    var _this = this;
    _this.setData({ timestart: e.timeStamp });
  },
  // Click the end time 
  timeend: function (e) {
    var _this = this;
    _this.setData({ timeend: e.timeStamp });
  },

  // Save the picture 
  saveImg: function (e) {
    var that = this;
    var times = that.data.timeend - that.data.timestart;
    if (times > 300) {
      console.log(" Long press ");
      console.log(that.data.prur)
      wx.saveImageToPhotosAlbum({
        filePath: that.data.prurl,
        success(res) {
          wx.showModal({
            content: ' Pictures saved to album , Let's sun it quickly ~',
            showCancel: false,
            confirmText: ' Good da ',
            confirmColor: '#72B9C3',
            success: function (res) {
              if (res.confirm) {
                console.log(' The user clicks ok ');
                that.setData({
                  hidden: true
                })
              }
            }
          })
        }
      })
    }
  },


  save: function () {
    var that = this
    // In the production environment   Remember to add the code to get the photo album authorization 
    console.log(that.data.prur)
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: ' Pictures saved to album , Let's sun it quickly ~',
          showCancel: false,
          confirmText: ' Good da ',
          confirmColor: '#72B9C3',
          success: function (res) {
            if (res.confirm) {
              console.log(' The user clicks ok ');
              that.setData({
                hidden: true
              })
            }
          }
        })
      }
    })
  }
})

It should be noted that ：

The background picture is a png chart . The QR code is transparent ！（ The following style ）