小程序画布

<canvas style="width:800rpx; height: 1200rpx;background:#f1f1f1" canvas-id="firstCanvas"></canvas>
<view bindtap='saveImg' style='width:150rpx;height:50rpx;background:#000;color:#fff;text-align:center;line-height:50rpx;border-radius:10rpx;font-size:24rpx;margin:0 auto'>保存</view>

 

Page({
  data:{
    img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=578899140,1412678472&fm=27&gp=0.jpg"
  },
  onLoad: function (options) {
    //需要注意的是：我们展示图片的域名需要在后台downfile进行配置，并且画到canvas里面前需要先下载存储到data里面
    let that = this;
    //先下载下来，比如我们的logo
    wx.downloadFile({
      url: that.data.img,
      success: function (res) {
        console.log(res);
        that.setData({
          img: res.tempFilePath
        });
        that.canvasImg();
      }
    })
  },
  canvasImg() {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')
    const grd = context.createLinearGradient(0, 0, 300, 0);//创建了一个线性的渐变颜色 前两个参数起点横纵坐标，后两个参数终点横纵坐标
    grd.addColorStop(0, '#fff');
    grd.addColorStop(1, '#fff');
    context.setFillStyle(grd);   
    context.fillRect(0, 0, 400, 600)
    context.setFillStyle("#222");
    context.setFontSize(32)
    context.setTextAlign('center')    
    context.fillText('曹牛', 210, 60)
    context.setFontSize(20)
    context.setTextAlign('center')
    context.fillText('副主任医师', 210,120)
    context.drawImage(this.data.img, 110, 200, 200, 200);
    context.setFontSize(16)    
    context.setTextAlign('center')
    context.fillText('微信扫描上方二维码,随时复诊', 210, 450)
    context.draw()
  },
  saveImg() {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 400,                     //画布宽高
      height: 600,
      destWidth: 600,                 //画布宽高*dpr 以iphone6为准
      destHeight: 800,
      canvasId: 'firstCanvas',
      success: function (res) {
        console.log(res.tempFilePath) //生成的临时图片路径
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            console.log(res);
            wx.showToast({
              title: '保存成功',
            })
          }
        })
      }
    })
  }
})