UniApp 用canvas生成图片保存本地

UniApp 中可以使用 Canvas 组件来生成图片，并使用 uni.canvasToTempFilePath 接口将 Canvas 画布内容转为临时文件路径，最后使用 uni.saveImageToPhotosAlbum 接口将临时文件路径保存到本地相册。

以下是一个示例代码：

<template>
  <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  <button @tap="saveImage">保存图片</button>
</template>

<script>
export default {
  methods: {
    saveImage() {
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: '保存成功'
              })
            },
            fail: () => {
              uni.showToast({
                title: '保存失败',
                icon: 'none'
              })
            }
          })
        }
      })
    }
  },
  mounted() {
    const ctx = uni.createCanvasContext('myCanvas')
    ctx.fillStyle = '#f00'
    ctx.fillRect(0, 0, 300, 300)
    ctx.draw()
  }
}
</script>

在上述代码中，我们首先在 template 中定义了一个 canvas 组件和一个按钮。在 mounted 钩子函数中，我们获取了 CanvasRenderingContext2D 对象并使用 fillRect 方法绘制了一个红色的矩形。在 saveImage 方法中，我们使用 uni.canvasToTempFilePath 接口将 Canvas 画布内容转为临时文件路径，并使用 uni.saveImageToPhotosAlbum 接口将临时文件路径保存到本地相册。最后，我们在保存成功或失败时使用 uni.showToast 接口提示用户。