当前位置：首页 > VUE

vue实现屏幕快照截图

2026-02-23 01:52:43VUE

实现屏幕快照截图的方法

在Vue中实现屏幕快照截图功能，可以通过以下几种方式实现，具体选择取决于需求场景（如截图范围、是否需要交互等）。

使用html2canvas库

html2canvas是一个流行的JavaScript库，能够将网页DOM元素转换为Canvas图像，适合截图当前页面或指定区域。

安装html2canvas：

vue实现屏幕快照截图

npm install html2canvas

示例代码：

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

<script>
import html2canvas from 'html2canvas';

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

使用第三方API（如浏览器扩展）

若需截取整个屏幕（包括浏览器外内容），需调用浏览器API（如Chrome的chrome.tabs.captureVisibleTab），通常需要浏览器扩展支持。

vue实现屏幕快照截图

示例（Chrome扩展）：

chrome.tabs.captureVisibleTab(null, { format: 'png' }, (dataUrl) => {
  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = 'fullscreen.png';
  link.click();
});

使用Canvas原生API

对于简单需求，可直接通过Canvas绘制内容并导出。

示例：

<template>
  <canvas ref="canvas" width="300" height="150"></canvas>
  <button @click="saveAsImage">保存</button>
</template>

<script>
export default {
  mounted() {
    const ctx = this.$refs.canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 100, 100);
  },
  methods: {
    saveAsImage() {
      const canvas = this.$refs.canvas;
      const image = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.href = image;
      link.download = 'canvas-image.png';
      link.click();
    }
  }
};
</script>