vue点击按钮下载图片

你可以使用HTML5的canvas将图片绘制到画布上，然后使用JavaScript中的download属性下载图片。下面是一个基本的实现：

HTML代码：

<button @click="downloadImage">下载图片</button>
<canvas ref="canvas"></canvas>

JavaScript代码：

methods: {
  downloadImage() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.src = 'your-image-url';

    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      canvas.toBlob((blob) => {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'your-image-name.png';
        link.click();
      });
    }
  }
}

在这个例子中，我们首先通过`<canvas>`元素和`getContext()`方法获取了canvas的上下文，然后创建了一个`<img>`元素并指定了图片的URL。当图片加载完成后，我们将其绘制到画布上，然后使用canvas的`toBlob()`方法将画布转换为Blob对象，最后创建一个`<a>`元素并将其href属性设置为Blob URL，从而实现了下载功能。