小程序生成图片并保存

wxml

  
  保存到相册

js

data: {
    username: '', //学员姓名
    receipt: '', //收据单号
    qrCode: '',
    canvas:'',//画布对象
    canvasW: 0, //画布宽
    canvasH: 0, //画布高
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    let that = this;
    const dpr = wx.getSystemInfoSync().pixelRatio; //设备像素比
    // 获取设备宽度，计算canvas宽高
    wx.getSystemInfo({
      success: function (res) {
        console.log('设备宽度', res);
        let canvasW = Math.round(res.screenWidth*dpr * 0.4);//乘以设备像素比，使canvas适应各种屏幕不至于大小不同
        let canvasH = canvasW;
        that.setData({
          canvasW,
          canvasH,
          canvasX: res.screenWidth
        })
        that.createCavas(); // 暂时在此执行
      }
    })
  },
/**
   * 创建图片实例
   */
  createCavas() {
    wx.createSelectorQuery()
      .select('#canvas')
      .fields({
        node: true,
        size: true,
      })
      .exec(this.init.bind(this))
  },
  init(res) {
    const width = res[0].width
    const height = res[0].height

    const canvas = res[0].node; //获取画布节点
    this.setData({canvas:canvas});
    const ctx = canvas.getContext('2d'); //获取画布上下文

    let canvasW = width;
    let canvasH = height;
    canvas.width = canvasW; // 设置画布宽
    canvas.height = canvasH;
    ctx.fillStyle = '#fff'; //设置背景色(填充色)


    // ctx.fillRect(0, 0, width, height); //填充一个矩形
    //绘制圆角矩形
    this.darwRoundRect(0,0,this.data.canvasW,this.data.canvasH,this.data.canvasW/2-135,ctx);
    // 创建一个图片对象
    let poster = canvas.createImage();
    poster.src = this.data.qrCode;
    let codeW = canvasW / 1.5; //二维码宽
    let codeH = canvasH / 1.5; //二维码高
    let codX = this.data.canvasW / 2 - codeW / 2;
    let codY = this.data.canvasH / 2 - codeH / 2;
    poster.onload = () => {
      ctx.drawImage(poster, codX, codY, codeW, codeH); //生成图片
    }
    //添加文字
    ctx.fillStyle = "#333333";
    ctx.font = "14px Arial";
    console.log(ctx.measureText(this.data.username).width); //获取文本宽
    ctx.fillText('长按识别二维码，进入查看缴费详情', (canvasW - ctx.measureText('长按识别二维码，进入查看缴费详情').width) / 2, codY + codeH + 15);
    ctx.fillText(this.data.receipt, (canvasW - ctx.measureText(this.data.receipt).width) / 2, codY);
    ctx.fillText(this.data.username, (canvasW - ctx.measureText(this.data.username).width) / 2, codY - 20);
  },
   /**
   * 绘制圆角矩形
   * @param {*} x 起始点x坐标
   * @param {*} y 起始点y坐标
   * @param {*} w 矩形宽
   * @param {*} h 矩形高
   * @param {*} r 圆角半径
   * @param {*} ctx 画板上下文
   */
  darwRoundRect(x, y, w, h, r, ctx) {
    // 左上弧线
    ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI)
    // 左直线
    ctx.moveTo(x, y + r)
    ctx.lineTo(x, y + h - r)
    // 左下弧线
    ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, 1 * Math.PI)
    // 下直线
    ctx.lineTo(x + r, y + h)
    ctx.lineTo(x + w - r, y + h)
    // 右下弧线
    ctx.arc(x + w - r, y + h - r, r, 0 * Math.PI, 0.5 * Math.PI)
    // 右直线
    ctx.lineTo(x + w, y + h - r)
    ctx.lineTo(x + w, y + r)
    // 右上弧线
    ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
    // 上直线
    ctx.lineTo(x + w - r, y)
    ctx.lineTo(x + r, y)
    ctx.fillStyle='white';
    ctx.fill();//对当前路径中的内容进行填充。默认的填充色为黑色
  },
  /**
   * 保存图片
   */
  saveImg() {
    wx.canvasToTempFilePath({
      canvas: this.data.canvas,
      x: 0,
      y: 0,
      width: this.data.canvasW*2,
      height: this.data.canvasH*2,
      destWidth: this.data.canvasW,
      destHeight: this.data.canvasH,
      // fileType:'jpg',
      success: res => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showToast({
              title: '已保存到相册',
              icon: 'success',
              duration: 3000
            })
          }
        })
      }
    })
  },