小程序 canvas生成分享海报

成品效果图：将二维码和图片拼合到一张图上。各位可以扫下面小程序码体验一下。

位置在小程序首页-右上角-生成海报。

我做了图片切换。

 

<!--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>
<!-- 画布大小按需定制 这里我按照背景图的尺寸定的  -->
<canvas canvas-id="shareImg" hidden='{{cvsdis}}'  style="width:750px;height:1136px"></canvas>
<!-- 预览区域  -->
<view hidden='{{hidden}}' class='preview'>
  <image src='{{prurl}}' class='bcimg' bindtouchstart='timestart' bindtouchend='timeend' bindtap='saveImg'></image>
  <button type='primary' size='mini' bindtap='save'>保存到相册</button>
</view>
<view class='share'  bindtap='qie'>更换样式</view>
<button class='share2' type='primary' bindtap='share' disabled='{{cvsdis}}'>生成分享图</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:'接口地址',
    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('拼合前看1', res)
            const ctx = wx.createCanvasContext('shareImg')
            //主要就是计算好各个图文的位置
            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('拼合前看2', res)
            const ctx = wx.createCanvasContext('shareImg')
            //主要就是计算好各个图文的位置
            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
            })
          })
        }
      }
    )
  },
  /**
   * 生成分享图
  */
  share: function () {
    var that = this
    wx.showLoading({
      title: '努力生成中...'
    })
    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('生活的'+that.data.prurl);
        wx.hideLoading()
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },

  /**
   * 保存到相册
  */
  timestart: function (e) {
    var _this = this;
    _this.setData({ timestart: e.timeStamp });
  },
  //点击结束的时间
  timeend: function (e) {
    var _this = this;
    _this.setData({ timeend: e.timeStamp });
  },

  //保存图片
  saveImg: function (e) {
    var that = this;
    var times = that.data.timeend - that.data.timestart;
    if (times > 300) {
      console.log("长按");
      console.log(that.data.prur)
      wx.saveImageToPhotosAlbum({
        filePath: that.data.prurl,
        success(res) {
          wx.showModal({
            content: '图片已保存到相册，赶紧晒一下吧~',
            showCancel: false,
            confirmText: '好哒',
            confirmColor: '#72B9C3',
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定');
                that.setData({
                  hidden: true
                })
              }
            }
          })
        }
      })
    }
  },


  save: function () {
    var that = this
    //生产环境时 记得这里要加入获取相册授权的代码
    console.log(that.data.prur)
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              that.setData({
                hidden: true
              })
            }
          }
        })
      }
    })
  }
})

需要注意的是：

背景图是一张png图。二维码部分为透明！（下图样式）