微信小程序实现canvas生成海报保存到本地

<view>
    <canvas class="canvas" style="width: {{canvas_width}}px;height:{{canvas_height}}px;" canvas-id="mycanvas"></canvas>
    <view class="pop">
        <view class="popbg" bindtap="getclose"></view>
        <view class="popup">
            <view class="poster">
                <image src="{{canvas}}"></image>
            </view>
            <view class="save">
                <view class="down">
                    <image mode="widthFix" src="https://sucai.suoluomei.cn/sucai_zs/images/20200110105821-1.png">
                    </image>
                </view>
                <view bindtap="getsave">保存图片</view>
            </view>
        </view>
    </view>
</view>

.popbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.popup {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%);
    z-index: 100;
}

.poster {
    width: 700rpx;
    height: 800rpx;
    background: #fff;
    border-radius: 30rpx;
    overflow: hidden;
}

.save {
    margin: 40rpx auto 0;
    width: 340rpx;
    height: 70rpx;
    background: #0C6D4A;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.down {
    width: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save view:nth-child(2) {
    color: #fff;
    font-size: 28rpx;
    margin-left: 20rpx;
}

.canvas {
    position: absolute;
    top: -9999rpx;
    left: 0;
}

image {
    width: 100%;
    height: 100%;

}

var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    canvas: '',
    canvas_width: 700,
    canvas_height: 800,
    main: "https://sucai.suoluomei.cn/sucai_zs/images/20191209160052-2.png",
    logo: "https://sucai.suoluomei.cn/sucai_zs/images/20190919150508-logo.png",
    explain: "种一棵树最好的时间是十年前，其次是现在",
    code: "https://sucai.suoluomei.cn/sucai_zs/images/20191123112141-2.png",
    avatar: "https://sucai.suoluomei.cn/sucai_zs/images/20191126150939-avatar.jpg"
  },

  onLoad: function (options) {
    var logo = this.data.logo
    var main = this.data.main
    var explain = this.data.explain
    var code = this.data.code
    var avatar = this.data.avatar
    this.getcanvas(logo, main, explain, code, avatar)
  },
  // 获取海报 画布设置宽700 高800 
  // 以此传入图标，主体图片，标题文字，小程序二维码
  getcanvas(logo, main, explain, code, avatar) {
    wx.showLoading({
      title: '加载中',
    })
    // 主图所需
    let primary = ""
    let primary_width = ""
    let primary_height = ""
    // logo所需
    let mark = ""
    let mark_width = ""
    let mark_height = ""
    // 小程序码所需
    let yard = ""
    let yard_width = ""
    let yard_height = ""
    // 用户头像
    let portrait = ""
    let portrait_width = ""
    let portrait_height = ""

    return new Promise((resolve, reject) => {
      // 海报主要图
      wx.getImageInfo({
        src: main,
        success: (res) => {
          primary = res.path
          primary_width = res.width
          primary_height = res.height
          if (res.errMsg == "getImageInfo:ok") {
            // 海报水印logo
            wx.getImageInfo({
              src: logo,
              success: (res) => {
                mark = res.path
                mark_width = res.width
                mark_height = res.height
                if (res.errMsg == "getImageInfo:ok") {
                  // 小程序码
                  wx.getImageInfo({
                    src: code,
                    success: (res) => {
                      yard = res.path
                      yard_width = res.width
                      yard_height = res.height
                      if (res.errMsg == "getImageInfo:ok") {
                        // 用户头像
                        wx.getImageInfo({
                          src: avatar,
                          success: (res) => {
                            portrait = res.path
                            portrait_width = res.width
                            portrait_height = res.height
                            resolve(res)
                          }
                        })
                      }
                    },
                  })
                }
              },
            })
          }
        },
      })
    })
      .then(res => {
        let ctx = wx.createCanvasContext('mycanvas')
        // 填充背景颜色
        ctx.rect(0, 0, this.data.canvas_width, this.data.canvas_height)
        ctx.setFillStyle('#fff')
        ctx.fill()
        // logo图片
        ctx.drawImage(mark, 30, 30, mark_width, mark_height)
        // 竖线
        ctx.moveTo(mark_width + 40, 30)
        ctx.lineTo(mark_width + 40, mark_height + 30)
        ctx.stroke()
        // 标题文字
        ctx.setFontSize(28)
        ctx.setFillStyle('#000')
        ctx.fillText('标题文字', mark_width + 50, mark_height + 15)
        // 用户头像
        ctx.save()
        ctx.beginPath()
        ctx.arc(this.data.canvas_width - 90, 60, 50, 0, Math.PI * 2, false);
        ctx.stroke()
        ctx.clip();
        ctx.drawImage(portrait, this.data.canvas_width - 145, 5, 110, 110) //145为arc的90加110除以2
        ctx.restore()
        // 主体图片
        ctx.drawImage(primary, this.data.canvas_width / 2 - primary_width / 2.4, 140, primary_width / 1.2, primary_height / 1.2)
        // 详情
        ctx.setFontSize(24)
        ctx.setTextAlign('center')
        ctx.setFillStyle('#666')
        ctx.fillText(explain, this.data.canvas_width / 2, 500)
        ctx.fillText('你的好友分享给你的小程序', this.data.canvas_width / 2, 550)
        // 小程序二维码
        ctx.drawImage(yard, this.data.canvas_width / 2 - yard_width / 2.4, 600, yard_width / 1.2, yard_height / 1.2)
        ctx.draw(true, setTimeout(() => {
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: (res) => {
              wx.hideLoading()
              console.log(res.tempFilePath)
              this.setData({
                canvas: res.tempFilePath
              })
            },
          }, this)
        }, 500))
      })
  },
  // 保存为图片
  getsave() {
    wx.getSetting({ //询问用户是否保存相册到本地
      success: (set) => {
        wx.saveImageToPhotosAlbum({
          filePath: this.data.canvas,
          success: (res) => {
            if (res.errMsg == "saveImageToPhotosAlbum:ok") {
              wx.showToast({
                title: '保存成功',
              });
              this.setData({
                show: 0
              })
            }
          }
        })
        //拒绝保存到本地的处理机制
        if (set.authSetting['scope.writePhotosAlbum'] == false) {
          wx.openSetting({
            success(set) {
              console.log(set)
            }
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})