Canvas绘图：绘制图片、竖排文字，保存图片到相册，分享到朋友圈

2023-09-12 02:02:03





### 前言
闲暇时间抽个空写了个三国杀武将手册的小程序，中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码，然后提供保存图片到相册，最终让用户可以分享到朋友圈或其他平台。合成图片应该按照Canvas的文档来做都没什么问题，主要是有个竖排文字的需求，这里和大家分享一下。


### 绘制图片
首先，我们需要在Canvas上绘制图片。我们可以使用Canvas的drawImage()方法来实现。drawImage()方法的第一个参数是图片的路径，第二个参数是图片在Canvas上的位置。我们可以使用Canvas的translate()方法来设置图片的位置。

```js
const ctx = wx.createCanvasContext('canvas');
ctx.drawImage('/path/to/image.png', 0, 0);

绘制竖排文字

接下来，我们需要在Canvas上绘制竖排文字。我们可以使用Canvas的fillText()方法来实现。fillText()方法的第一个参数是我们要绘制的文本，第二个参数是文本在Canvas上的位置。我们可以使用Canvas的rotate()方法来设置文本的旋转角度。

ctx.save();
ctx.rotate(Math.PI / 2);
ctx.fillText('竖排文字', 0, 0);
ctx.restore();

保存图片到相册

当我们绘制好图片后，我们可以使用Canvas的toDataURL()方法将图片转换为DataURL。然后，我们可以使用wx.saveImageToPhotosAlbum()方法将图片保存到相册。

const base64 = canvas.toDataURL('image/png');
wx.saveImageToPhotosAlbum({
  filePath: base64,
  success: (res) => {
    console.log('图片保存成功');
  },
  fail: (res) => {
    console.log('图片保存失败');
  }
});

分享图片到朋友圈

当我们保存好图片后，我们可以使用wx.shareAppMessage()方法将图片分享到朋友圈。

wx.shareAppMessage({
  title: '标题',
  path: '/path/to/page',
  imageUrl: base64,
  success: (res) => {
    console.log('图片分享成功');
  },
  fail: (res) => {
    console.log('图片分享失败');
  }
});