小程序使用canvas将文本信息绘制成图片，并保存到本地相册

<canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px' canvas-id='myCanvas'></canvas>

var ctx = "" // 用于获取canvas
var leftMargin = "" //文字距离左边边距
var topMargin = "" //文字距离右边边距
Pages({
data:{
    title: '订单信息',
    salary: '', //订单信息--地址
    rtype: '', //订单信息--姓名
    rmoney: '', //订单信息--手机号
    canvasWidth: '', // canvas宽度
    canvasHeight: '', // canvas高度
    },
    // 点击保存按钮，保存到本地相册
handleSave() {
    let _this = this;
    //获取相册授权
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              _this.tempFilePath()
            }
          })
        } else {
          _this.tempFilePath()
        }
      }
    })
  },
img(imgSrc) {
    let _this = this
    var imgSrc = imgSrc
    wx.downloadFile({
      url: imgSrc,
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            wx.showToast({
              title: '保存成功',
              duration: 2000
            })
            _this.setData({
              showPrintInfo: false
            })
          },
       fail(err) {
            console.log(err);
            if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
              wx.openSetting({
                success(settingdata) {
                  console.log(settingdata)
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                    wx.showToast({
                      title: '图片已保存',
                      icon: 'none',
                      duration: 2000
                    })
                    console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                  } else {
                    console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                  }
                }
              })
            }
          }
        })
      }
    })
  },
  //画背景图
  addImage() {
    var context = wx.createContext();
    var that = this;
    var path = "../../components/images/share.jpg";
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    //不知道是什么原因，手机环境能正常显示
    ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight);
    this.addTitle()
    this.addRtype()
    this.addRmoney()
    this.addSalary()
    ctx.draw()
  },
  //画标题
  addTitle() {
    var str = this.data.title
    ctx.font = 'normal bold 20px sans-serif';
    ctx.setTextAlign('center'); // 文字居中
    ctx.setFillStyle("#222222");
    ctx.fillText(str, this.data.canvasWidth / 2, 65)
  },
  // 画姓名
addRtype() {
    var str = this.data.rtype
    ctx.setFontSize(16)
    ctx.setFillStyle("#222");
    ctx.setTextAlign('center');
    ctx.fillText(str, this.data.canvasWidth / 2, topMargin * 0.5)
  },
  // 画地址
addRmoney() {
    var str = this.data.rmoney
    ctx.setFontSize(16)
    ctx.setFillStyle("#222");
    ctx.setTextAlign('center');
    ctx.fillText(str, this.data.canvasWidth / 2, topMargin * 0.6)
  },
  // 画电话
  addSalary() {
    var str = this.data.salary
    ctx.setFontSize(16)
    ctx.setFillStyle("#222");
    ctx.setTextAlign('center');
    ctx.fillText(str, this.data.canvasWidth / 2, topMargin * 0.71)
  },
  //导出图片
tempFilePath() {
    let _this = this;
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success(res) {
        _this.img(res.tempFilePath)
      }
    });
  },
 /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
    ctx = wx.createCanvasContext('myCanvas')
        this.addImage()
  },
onLoad(options) {
    // 模拟code码
    if (options.code) {
      this.setData({
        code: options.code
      })
    } else {
      console.log("no scene");
    }
    this.queryCleanOrder()
    let _this = this
    wx.getSystemInfo({
      success(res) {
        _this.setData({
          //设置宽为屏幕宽，高为屏幕高的80%，因为文档比例为5:4
          canvasWidth: res.windowWidth,
          canvasHeight: res.windowWidth * 0.8
        })
        leftMargin = res.windowWidth
        topMargin = res.windowWidth * 0.8
      },
    })
  },
})