当前位置：首页 > VUE

vue截屏实现

2026-03-30 14:00:24VUE

使用html2canvas库实现截屏

html2canvas是一个流行的JavaScript库，可以将网页元素转换为canvas图像。在Vue项目中安装html2canvas：

npm install html2canvas

在Vue组件中使用：

import html2canvas from 'html2canvas';

methods: {
  captureScreen() {
    html2canvas(document.querySelector("#capture-area")).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      // 下载图片
      const link = document.createElement('a');
      link.download = 'screenshot.png';
      link.href = imgData;
      link.click();
    });
  }
}

使用vue-web-screen-shot插件

vue-web-screen-shot是专为Vue设计的截屏插件，提供更简单的API：

npm install vue-web-screen-shot

全局注册：

vue截屏实现

import screenShot from 'vue-web-screen-shot';
Vue.use(screenShot);

组件内使用：

<screen-shot @getImgData="getImgData"></screen-shot>

<script>
methods: {
  getImgData(base64Data) {
    // 处理获取的base64图片数据
  }
}
</script>

实现区域选择截屏功能

结合html2canvas实现区域选择：

vue截屏实现

methods: {
  captureSelected() {
    const element = document.querySelector('#target-element');
    const rect = element.getBoundingClientRect();

    html2canvas(document.body, {
      x: rect.left,
      y: rect.top,
      width: rect.width,
      height: rect.height,
      windowWidth: document.documentElement.offsetWidth,
      windowHeight: document.documentElement.offsetHeight
    }).then(canvas => {
      // 处理生成的canvas
    });
  }
}

处理跨域资源问题

当页面包含跨域图片时，需要配置html2canvas：

html2canvas(element, {
  useCORS: true,  // 启用CORS
  allowTaint: true  // 允许污染canvas
});

保存截图到本地

将canvas转换为可下载的图片：

function downloadImage(canvas) {
  const link = document.createElement('a');
  link.download = 'vue-screenshot.png';
  link.href = canvas.toDataURL('image/png');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

实现截图编辑功能

使用canvas API添加标注：

function addAnnotation(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.font = '20px Arial';
  ctx.fillStyle = 'red';
  ctx.fillText('Vue Screenshot', 10, 30);
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 2;
  ctx.strokeRect(50, 50, 100, 100);
}

标签: vue