vue base64转图片保存到本地

以下是Vue中将base64转为图片并保存到本地的示例代码：

<template>
  <div>
    <input type="file" @change="onChange">
  </div>
</template>

<script>
export default {
  methods: {
    onChange(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const base64 = reader.result
        const img = new Image()
        img.src = base64
        img.onload = () => {
          const canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          const context = canvas.getContext('2d')
          context.drawImage(img, 0, 0)
          const dataURL = canvas.toDataURL('image/png')
          const link = document.createElement('a')
          link.download = 'image.png'
          link.href = dataURL
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      }
    }
  }
}
</script>

当用户选择文件后，将文件读取为base64格式并加载到img元素中。一旦图像加载完成，将创建一个canvas元素并使用getContext()方法获取2D上下文。使用drawImage()方法将图像绘制到canvas中。最后，使用toDataURL()方法将canvas转换为base64格式的图像数据URL，并将其创建为一个下载链接，使用户可以将其保存到本地