当前位置：首页 > VUE

vue实现截图

2026-03-07 00:09:50VUE

Vue 实现截图的方法

使用 html2canvas 库

html2canvas 是一个流行的 JavaScript 库，可以将 DOM 元素转换为 Canvas，进而生成截图。

安装 html2canvas：

npm install html2canvas

在 Vue 组件中使用：

<template>
  <div ref="screenshotTarget">
    <!-- 需要截图的内容 -->
  </div>
  <button @click="capture">截图</button>
</template>

<script>
import html2canvas from 'html2canvas';

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

使用 vue-html2canvas

vue-html2canvas 是专为 Vue 封装的截图工具，使用更简便。

vue实现截图

安装：

npm install vue-html2canvas

使用示例：

<template>
  <div v-html2canvas="options" ref="screenshotTarget">
    <!-- 需要截图的内容 -->
  </div>
  <button @click="capture">截图</button>
</template>

<script>
import VueHtml2Canvas from 'vue-html2canvas';

export default {
  directives: {
    html2canvas: VueHtml2Canvas
  },
  data() {
    return {
      options: {
        logging: false,
        useCORS: true
      }
    };
  },
  methods: {
    capture() {
      this.$refs.screenshotTarget.$html2canvas({
        onRendered: (canvas) => {
          const image = canvas.toDataURL('image/png');
          this.downloadImage(image, 'screenshot.png');
        }
      });
    },
    downloadImage(data, filename) {
      const link = document.createElement('a');
      link.href = data;
      link.download = filename;
      link.click();
    }
  }
};
</script>

截图特定区域

如果需要截取特定区域而非整个组件，可以调整目标元素的样式和尺寸：

vue实现截图

<template>
  <div class="screenshot-area" ref="screenshotTarget">
    <!-- 需要截图的内容 -->
  </div>
</template>

<style>
.screenshot-area {
  width: 500px;
  height: 300px;
  overflow: hidden;
}
</style>

处理跨域资源

如果截图内容包含跨域图片，需要配置 CORS 并设置 useCORS 选项：

html2canvas(element, {
  useCORS: true,
  allowTaint: true
});

截图质量调整

可以通过调整 scale 参数提高截图质量：

html2canvas(element, {
  scale: 2 // 默认值为1，增大可提高质量
});

保存截图

生成截图后，可以通过以下方式保存或展示：

下载为图片文件（如前文示例）

显示在页面中：

const img = new Image();
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);

上传到服务器：

const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
const formData = new FormData();
formData.append('image', blob, 'screenshot.png');
axios.post('/upload', formData);