小程序生成图片并保存_saveasimage () { wx.createselectorquery().select('

wxml

<canvas type="2d" id="canvas" style="width: {{canvasW}}px; height: {{canvasH}}px;"></canvas>
<view class="save-btn flex-colum flex-lr-center flex-tb-center" catchtap="saveImg">
  <image src="/images/save-img.png"></image>
  <text class="font-color-2b margin-t-10">保存到相册</text>
</view>
1
2
3
4
5

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
            })
          }
        })
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138