vue3下载图片到本地

在 Vue3 中下载图片到本地可以通过以下步骤实现：

1. 安装 `file-saver` 和 `canvas-toBlob` 依赖：

npm install file-saver canvas-toBlob --save

2. 在需要下载图片的组件中引入依赖：

import { saveAs } from 'file-saver';
import { fabric } from 'fabric';
import { toBlob } from 'html-to-image';
import { toCanvas } from 'html-to-image';

3. 在组件中定义一个下载图片的方法：

downloadImage() {
  // 获取需要下载的图片元素
  const element = document.querySelector('#image');

  // 使用 html-to-image 将元素转换为 canvas 对象
  toCanvas(element)
    .then(function (canvas) {
      // 将 canvas 对象转换为 blob 对象
      return new Promise(function (resolve) {
        canvas.toBlob(resolve, 'image/png');
      });
    })
    .then(function (blob) {
      // 使用 file-saver 将 blob 对象保存到本地
      saveAs(blob, 'image.png');
    });
}

4. 在组件模板中添加一个下载按钮，并绑定下载图片的方法：

<template>
  <div>
    <img id="image" src="./assets/image.png" alt="image" />
    <button @click="downloadImage">下载图片</button>
  </div>
</template>

注意：需要将上述代码中的 `#image` 替换为你需要下载的图片的元素选择器。