“请给我一面国旗@微信官方”朋友圈刷屏了，只想说一句：”腾讯的产品真牛逼！！！”


1
2
3
4
5
6
7
8
9
10
<view>
  <view class='canvasBox'>
   <!--  -->
    <canvas class='share-canvas' canvas-id="share_canvas" style="width:{{canvasW}}px;height:{{canvasH}}px"></canvas>
  </view>
  <view class='btnBox'>
    <view bindtap="setHeader" data-type="getImage">选择头像</view>
    <view bindtap='saveImage'>导出头像</view>
  </view>
</view>
1
2
3
4
5
6
7
8
.share-canvas{
  /* width: 300px;
  height: 300px; */
  border-radius: 15px;
  overflow: hidden;
  margin: 20px 0 0 20px;
  background: #ddd;
}
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
var app = getApp();
Page({
  data: {
    decorationImage: '../img/1.jpg', // 右下角装饰图片
    canvasW: 300,
    canvasH: 300,
    canvasWidth: 250,
    canvasHeight: 250,
    smallImage: 74,
    marginWidth: 25,
    headerImage: ''
  },
  onReady: function () {
    this.drawCanvas()
  },
  // 获取相册头像图片
  setHeader() {
    let that = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: 'original', // 可以指定是原图还是压缩图，默认二者都有
      sourceType: 'album', // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        that.setData({
          headerImage: tempFilePaths[0]
        });
        that.drawCanvas()
      }
    })
  },
  // 绘制圆角矩形
  roundRectColor: function (context, x, y, w, h, r) {  //绘制圆角矩形（纯色填充）
    context.save();
    context.fillStyle = "#fff";
    context.strokeStyle = '#fff';
    context.lineJoin = 'round';  //交点设置成圆角
    context.lineWidth = r;
    context.strokeRect(x + r / 2, y + r / 2, w - r, h - r);
    context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
    context.stroke();
    context.closePath();
  },
  // 渲染画布内容
  drawCanvas: function () {
    var that = this;
    // 拿到canvas context
    let ctx = wx.createCanvasContext('share_canvas');
    this.roundRectColor(ctx, that.data.marginWidth, that.data.marginWidth, this.data.canvasWidth, this.data.canvasHeight, 30)
    // ctx.setFillStyle('white')
    // ctx.fillRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
    if (that.data.headerImage) {
      ctx.drawImage(that.data.headerImage, 35, 35, this.data.canvasWidth - 20, this.data.canvasHeight - 20)
    }
    let x = this.data.canvasWidth - (that.data.smallImage - 20)
    let y = this.data.canvasWidth - (that.data.smallImage - 20)
    ctx.drawImage(this.data.decorationImage, x, y, that.data.smallImage, that.data.smallImage)
    ctx.draw();
  },
  // 保存图片到本地
  saveImage: function () {
    wx.showLoading({
      title: '正在保存图片..',
    });
    let that = this;
    wx.canvasToTempFilePath({
      x: that.data.marginWidth, // 导出的位置
      y: that.data.marginWidth,
      fileType: 'jpg', // 导出图片的格式
      width: that.data.canvasW - (that.data.marginWidth * 2), // 导出之前图片的尺寸
      height: that.data.canvasH - (that.data.marginWidth * 2), // 导出之前图片的尺寸
      destWidth: 960, // 导出之后图片的尺寸
      destHeight: 960, // 导出之后图片的尺寸
      canvasId: 'share_canvas',
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res);
            wx.showToast({
              title: '保存到相册成功',
              duration: 1500,
            })
          },
          fail(res) {
            console.log(res)
            wx.showToast({
              title: '保存到相册失败',
              icon: 'fail'
            })
          },
          complete(res) {
            console.log(res)
          }
        })
      }
    })
  }

git地址: