小程序canvas图片文字合成

废话不多说直接看码：代码直接复制即可可用

最后实现效果

1.WXML部分

<view class="shareImgs">
<canvas canvas-id="myCanvas" style="width:350px;height:568px;background-color:#fff;"></canvas>
</view>
<view class="saveImgBtn" bindtap="savecanvas">生成图片并保存相册</view>

2.WXSS部分

.shareImgs{width:350px;margin:20rpx auto;background-color:#fff;}
.saveImgBtn{color:#fff;background-color:#9933CC;height:90rpx;line-height:90rpx;font-size:32rpx;margin:40rpx;text-align:center;border-radius:8rpx;}

3.js部分

canvasImgFun(){ //可用调用或在onLoad中直接调用
    let _this = this
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.rect(0, 0, 350, 568)
    ctx.setFillStyle('#fff')
    ctx.fill()
    ctx.clip();//剪切
    ctx.drawImage('小程序二维码图片地址', 105, 320, 140, 140,0,0)
    ctx.draw()
    ctx.beginPath()
    ctx.font = 'normal bold 50px Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif'
    ctx.setFillStyle('#9933CC')
    ctx.setFontSize(50)
    ctx.fillText('壹柒图图', 75, 100)
    ctx.setFillStyle('#888')
    ctx.setFontSize(14)
    ctx.fillText('长按识别小程序码，进入壹柒图图', 70, 490)
    ctx.font = 'normal bold 38px Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif'
    ctx.setFillStyle('#515a6e')
    ctx.setFontSize(31)
    ctx.fillText('有头像工具装逼技巧', 33, 148)
    ctx.draw(true);
  },
  savecanvas(){
    let _this=this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 350,
      height: 568,
      canvasId: 'myCanvas',
      success:function(res) {
        console.log(res,'ssss')
        let img = res.tempFilePath
        wx.saveImageToPhotosAlbum({
          filePath: img,
          success(json) {
            wx.showToast({
              title:'成功保存',
              icon: 'none',
              duration: 2000
            });
            _this.cancelcanvas()
            console.log(json, 'kk')
          },
          fail() {
            wx.showToast({
              title: '保存失败',
              icon: 'none',
              duration: 2000
            });
            _this.cancelcanvas()
          }
        })
        console.log(res.tempFilePath)
      }
    })
  },