UniApp H5端用canvas生成图片保存本地

UniApp H5端可以使用HTML5的canvas标签来生成图片并保存到本地。具体实现步骤如下：

1. 在H5端页面中，首先需要在template中添加一个canvas标签，用于绘制图片：

<template>
  <canvas id="myCanvas"></canvas>
</template>

2. 在script中，获取canvas元素，并使用canvas API进行绘制。例如，绘制一张红色的矩形：

<script>
  export default {
    mounted() {
      // 获取canvas元素
      const canvas = document.getElementById('myCanvas')
      // 获取绘图上下文
      const ctx = canvas.getContext('2d')
      // 绘制矩形
      ctx.fillStyle = 'red'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
    }
  }
</script>

3. 绘制完成后，可以将canvas元素转化为图片，并保存到本地。可以使用canvas.toDataURL()方法将canvas转化为base64格式的图片数据，然后创建一个a标签并设置其href属性为图片数据，再调用a标签的click()方法触发下载。例如：

<script>
  export default {
    mounted() {
      // 获取canvas元素
      const canvas = document.getElementById('myCanvas')
      // 获取绘图上下文
      const ctx = canvas.getContext('2d')
      // 绘制矩形
      ctx.fillStyle = 'red'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      // 将canvas转化为base64格式的图片数据
      const imgData = canvas.toDataURL('image/png')
      // 创建a标签并设置href属性为图片数据
      const link = document.createElement('a')
      link.href = imgData
      // 设置下载文件名
      link.download = 'myImage.png'
      // 触发下载
      link.click()
    }
  }
</script>

通过以上步骤，就可以在UniApp H5端使用canvas生成图片并保存到本地了。