当前位置：首页 > VUE

vue实现保存图片

2026-01-19 19:14:57VUE

保存图片的实现方法

使用canvas绘制并保存

在Vue中可以通过canvas绘制内容后转换为图片保存。创建一个canvas元素，绘制所需内容后转换为DataURL，触发下载。

vue实现保存图片

<template>
  <div>
    <canvas ref="canvas" width="500" height="300"></canvas>
    <button @click="saveCanvasAsImage">保存图片</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveCanvasAsImage() {
      const canvas = this.$refs.canvas;
      const dataURL = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.download = 'my-image.png';
      link.href = dataURL;
      link.click();
    }
  },
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    // 绘制内容
    ctx.fillStyle = '#4CAF50';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = '30px Arial';
    ctx.fillStyle = 'white';
    ctx.fillText('保存这张图片', 100, 150);
  }
};
</script>

保存DOM元素为图片

使用html2canvas库可以将DOM元素转换为canvas，再保存为图片。先安装html2canvas：

vue实现保存图片

npm install html2canvas

然后在Vue组件中使用：

<template>
  <div>
    <div ref="elementToCapture" class="capture-area">
      <h1>需要保存的内容</h1>
      <p>这里可以是任何HTML内容</p>
    </div>
    <button @click="captureAndSave">保存为图片</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    async captureAndSave() {
      const element = this.$refs.elementToCapture;
      const canvas = await html2canvas(element);
      const dataURL = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.download = 'screenshot.png';
      link.href = dataURL;
      link.click();
    }
  }
};
</script>

<style>
.capture-area {
  border: 1px solid #ddd;
  padding: 20px;
  background: #f9f9f9;
}
</style>

保存网络图片

如果需要保存来自网络的图片，可以先将图片加载到canvas中：

<template>
  <div>
    <img ref="image" src="https://example.com/image.jpg" crossorigin="anonymous">
    <button @click="saveExternalImage">保存网络图片</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveExternalImage() {
      const img = this.$ref.image;
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      setTimeout(() => {
        const dataURL = canvas.toDataURL('image/jpeg');
        const link = document.createElement('a');
        link.download = 'downloaded-image.jpg';
        link.href = dataURL;
        link.click();
      }, 100);
    }
  }
};
</script>