vue 保存图片到本地

在 Vue 中保存图片到本地，可以使用类似于普通 JavaScript 的方法，不过需要注意一些细节。以下是一个示例代码：

<template>
  <div>
    <img ref="img" src="https://example.com/image.png">
    <button @click="downloadImage">保存图片</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadImage() {
      // 获取图片 DOM 对象
      const img = this.$refs.img;

      // 创建 Canvas 对象
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, img.width, img.height);

      // 将 Canvas 转为 Blob 对象
      canvas.toBlob(blob => {
        // 创建下载链接并点击下载
        const link = document.createElement('a');
        link.download = 'image.png';
        link.href = URL.createObjectURL(blob);
        link.click();

        // 释放占用的 URL 对象
        URL.revokeObjectURL(link.href);
      });
    }
  }
}
</script>

在以上代码中，我们首先使用 `ref` 属性获取图片 DOM 对象，然后创建一个 Canvas 对象，将图片绘制到 Canvas 上，再将 Canvas 转为 Blob 对象。最后，我们创建一个下载链接，将 Blob 对象的 URL 作为链接的 href 属性值，设置 download 属性为文件名，通过 click 方法模拟点击链接进行下载。注意，在下载完成后，我们需要调用 `URL.revokeObjectURL` 方法释放占用的 URL 对象。