小程序uniapp利用canvas生成海报并可以保存至相册

在uniapp中，可以利用canvas生成海报并保存到相册中。

1. 创建一个canvas组件并定义id，如posterCanvas：

2. 在JS文件中进行海报生成和保存的操作，如在index.vue文件中：

export default {
  mounted() {
    this.generatePoster();
  },
  methods: {
    generatePoster() {
      const canvas = uni.createCanvasContext('posterCanvas', this); // 创建canvas上下文

      // 绘制海报内容
      canvas.setFillStyle('#ffffff');
      canvas.fillRect(0, 0, 375, 600);

      canvas.setFontSize(24);
      canvas.fillText('这里是海报的内容', 50, 50);

      // 绘制完成后，将canvas内容保存到图片，并保存到相册
      canvas.draw(false, () => {
        uni.canvasToTempFilePath({
          canvasId: 'posterCanvas',
          success: (res) => {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '保存成功',
                  icon: 'none',
                  duration: 2000
                });
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none',
                  duration: 2000
                });
              }
            });
          },
          fail: () => {
            uni.showToast({
              title: '生成海报失败',
              icon: 'none',
              duration: 2000
            });
          }
        }, this);
      });
    }
  }
}

在这个示例中，我们通过在mounted钩子函数中调用generatePoster方法生成海报。

在generatePoster方法中，首先使用uni.createCanvasContext方法创建一个canvas上下文对象。然后使用canvas的绘制函数绘制海报内容。

绘制完成后，使用canvas.draw将canvas内容渲染到页面上。接下来，使用uni.canvasToTempFilePath将canvas内容保存为临时文件路径。

最后，调用uni.saveImageToPhotosAlbum将临时文件路径保存到相册中。保存成功后，会弹出保存成功的提示；保存失败则会弹出保存失败的提示。

注意，保存到相册的操作需要用户授权，所以需要在manifest.json文件中添加相册权限声明。