小程序生成图片并保存

自己做过几个小程序生成图片并保存的功能，觉得做这个功能用到的还挺多的，记录一下。

总体可以分为:

前端处理：后端返回数据，前端自己将图片、文字等画到 canvas 上，然后转图片。
后端处理：后端直接返回图片，前端只做保存功能。

前端处理

绘制 Canvas 并保存

小程序有强大的 canvas 可以转成图片并保存，具体API看文档open in new window 。

但是 canvas 的原生操作过于啰嗦，比如画一个字上去：

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.fillText('Hello World', 20, 20)
ctx.setFillStyle('red')

ctx.draw()

1
2
3
4
5
6
7

在这里我推荐一个库：wx_posteropen in new window 可以简化操作.

wx_poster.inits(function (){ 
    wx_poster.setFont(Hello World',{
        size: 20,
        color: 'red',
        x: 20,
        y: 20
    })
})

1
2
3
4
5
6
7
8

最后将 canvas 转成图片并保存就行了

// 在ctx.draw() 之后后调用
wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath)
        wx.saveImageToPhotosAlbum({ // 保存到相册
        filePath: res.tempFilePath,
        success: function (res) {
          wx.showToast({
              title: '保存成功',
          })
        },
        fail: function (err) {
          console.log(err)
        }
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

后端处理

整个图片都是后端返回的，前端只管保存就行了。

返回 base64 数据显示图片并保存

后端返回 base64 格式的情况

var imgSrc = this.data.imgSrc.slice(23); // 这里是把 data:image/png;base64,  这一段去除）
var save = wx.getFileSystemManager();
var number = Math.random() * 10;
save.writeFile({
    filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg',
    data: imgSrc,
    encoding: 'base64',
    success: res => {
    wx.saveImageToPhotosAlbum({ // 保存到相册
        filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg',
        success: function (res) {
        wx.showToast({
            title: '保存成功',
        })
        },
        fail: function (err) {
        console.log(err)
        }
    })
    console.log(res)
    },
    fail: err => {
    console.log(err)
    }
})
//   参考：https://www.cnblogs.com/china-fanny/p/11213746.html

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

保存网络图片到本地

返回网络图片并保存

  saveToPhone: function (e) {
    wx.downloadFile({
      url: '', // 网络图片地址
      success: res => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: (data) => {
            console.log(data)
          },
          fail: (err) => {
            console.log(err);
          },
        })
      }
    })
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 小程序生成图片并保存

# 前端处理

# 绘制 Canvas 并保存

# 后端处理