小程序canvas生成海报并保存本地

项目中遇到需要把用户的分数生成一张海报并点击保存本地，通过学习以下是绘制思路

1.canvas-id一定是要有的

<view class="box">
	<canvas canvas-id='canvas-demo' class='demo' style="width:100%;height:100%"      bindtap="saveimg"></canvas>
</view>

2.

.box{
  width: 80vw;
  height: 76vh;
  margin: 5vh auto 0;
}

3.首先我们网络图片保存在本地，然后在调用绘制canvas的方法，要不然真机上会不显示图片 (图片地址需要时https)

Page({
  data: {
    imgUrl: "这里是图片地址"
  },
  onLoad: function (options) {
    //把网络图片转成在本地
    wx.getImageInfo({
      src: this.data.imgUrl,  
      success:(res)=> {
        this.setData({
          imgUrl:res.path
        })
        this.getcanvas()
      }
    })
  },

  //绘制canvas的方法
  getcanvas() {
    let ctx = wx.createCanvasContext('canvas-demo')    
    let metrics = ctx.measureText('作者')    //获取字体的宽度
    let name = ctx.measureText('CWL')        //获取字体的宽度
    let rpx = 1;
    wx.getSystemInfo({
      success(res) {
        rpx = res.windowWidth / 375;   //适配手机
      },
    })
    ctx.drawImage(this.data.imgUrl, 0, 0, 300 * rpx, 460 * rpx)
    ctx.setFontSize(20 * rpx)
    ctx.fillText('微信小程序', 40 * rpx, 50 * rpx)
    ctx.fillText('canvas', 40 * rpx, 90 * rpx)
    ctx.fillText('海报分享点击保存', 40 * rpx , 130 * rpx)
    ctx.fillText('作者', 180 * rpx, 410 * rpx)
    ctx.setFillStyle('#EC7D1E');
    ctx.fillText('CWL', 180 * rpx + metrics.width * rpx + name.width * rpx, 410 * rpx)
    ctx.draw()
  },

  //点击保存图片
  saveimg() {
    wx.showLoading({
      title: '正在保存',
      mask: true,
    })
    wx.canvasToTempFilePath({
      canvasId: 'canvas-demo',
      success: (res) => {
        wx.hideLoading();
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showToast({
              title: '保存成功',
            })
          }
        })
      }
    });
  }
})