vue 保存vue 保存图片到本地图片到本地

要将图片保存到本地，可以使用HTML5中的File API和Canvas API。

步骤如下：

在Vue组件中添加一个file input元素和一个canvas元素。

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <canvas ref="canvas"></canvas>
    <button @click="saveImage">保存图片</button>
  </div>
</template>

在Vue组件的methods中，实现handleFileChange方法，用于将用户选择的图片加载到canvas上。

methods: {
  handleFileChange(e) {
    const file = e.target.files[0]
    const reader = new FileReader()
    reader.onload = (event) => {
      const img = new Image()
      img.onload = () => {
        const canvas = this.$refs.canvas
        const ctx = canvas.getContext('2d')
        canvas.width = img.width
        canvas.height = img.height
        ctx.drawImage(img, 0, 0)
      }
      img.src = event.target.result
    }
    reader.readAsDataURL(file)
  },
}

实现saveImage方法，用于将canvas中的图片保存到本地。

methods: {
  // ...
  saveImage() {
    const canvas = this.$refs.canvas
    const link = document.createElement('a')
    link.href = canvas.toDataURL()
    link.download = 'image.png'
    link.click()
  }
}

此时，点击保存图片按钮即可将canvas中的图片保存到本地