uniapp中uni.canvasToTempFilePath使用实例

下面是一个使用 `uni.canvasToTempFilePath` 的示例：

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    <button @tap="saveCanvas">保存图片</button>
    <image :src="imageSrc" mode="widthFix"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: ''
    }
  },
  methods: {
    saveCanvas() {
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: res => {
          this.imageSrc = res.tempFilePath
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    drawCanvas() {
      const ctx = uni.createCanvasContext('myCanvas')
      ctx.setFillStyle('red')
      ctx.fillRect(0, 0, 150, 150)
      ctx.draw()
    }
  },
  mounted() {
    this.drawCanvas()
  }
}
</script>

在这个示例中，我们创建了一个 canvas 画布，并在画布上绘制了一个红色的矩形。然后，我们使用 `uni.canvasToTempFilePath` 将画布内容转换为临时文件路径，并将其显示在页面上。

需要注意的是，我们需要在 `mounted` 钩子函数中调用 `drawCanvas` 方法来绘制 canvas 画布，否则 canvas 画布将是空白的。当用户点击保存图片按钮时，我们会调用 `saveCanvas` 方法来将画布内容转换为图片并显示在页面上。