小程序canvan画布，图片和文字结合，并保存到本地

业务场景：商品的分享，需要logo，商品图，价格，小程序二维码整合到一张图上分享到朋友圈。应用canvas把他们绘制到一张图上保存到本地相册然后分享

wxml部分：

<canvas canvas-id="myCanvas" style="width:300px;height:400px;border: 1px solid;margin:30rpx auto"/>
<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>

js部分：

// pages/my/my.js
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(){
    const ctx = wx.createCanvasContext('myCanvas');
    const grd = ctx.createLinearGradient(0, 0, 300, 0);//创建了一个线性的渐变颜色 前两个参数起点横纵坐标，后两个参数终点横纵坐标
    grd.addColorStop(0, '#000');
    grd.addColorStop(1, '#fff');
    ctx.setFillStyle(grd);                             //为创建的canvans上下文添充颜色  如果没有设置 fillStyle，默认颜色为 black。
    ctx.fillRect(0, 0, 300, 400);
    ctx.drawImage(this.data.img, 50, 100, 200, 145);   //里面的参数无非就是图片放置的位置即图片的横纵坐标，图片的宽高
    ctx.setFillStyle("#fff");
    ctx.setFontSize(20);                               //字大小
    ctx.setTextAlign('center');                        //是否居中显示，参考点画布中线
    ctx.fillText('今天天气好晴朗', 150, 280);            //150:canvas画布宽300，取1/2，中间，280：纵向位置
    ctx.draw();                                       
  },
  saveImg() {
    wx.canvasToTempFilePath({
      x:0,
      y:0,
      width: 300,                     //画布宽高
      height: 400,
      destWidth: 600,                 //画布宽高*dpr 以iphone6为准
      destHeight: 800,
      canvasId: 'myCanvas',
      success: function (res) {
        console.log(res.tempFilePath) //生成的临时图片路径
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            console.log(res);
            wx.showToast({
              title: '保存成功',
            })
          }
        })
      } 
    })
  }
})

直接copy到页面就可以看效果；

官网链接：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/intro.html

写的太水，大家轻喷啊，谢谢啦！