当前位置：首页 > VUE

vue前端实现截图功能

2026-02-23 03:01:04VUE

使用html2canvas库实现截图

html2canvas是一个流行的JavaScript库，可以将HTML元素转换为Canvas，进而实现截图功能。在Vue项目中安装使用：

npm install html2canvas

在Vue组件中引入并使用：

import html2canvas from 'html2canvas';

methods: {
  captureScreenshot() {
    html2canvas(document.querySelector("#target-element")).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      this.downloadImage(imgData, 'screenshot.png');
    });
  },
  downloadImage(data, filename) {
    const link = document.createElement('a');
    link.href = data;
    link.download = filename;
    link.click();
  }
}

使用dom-to-image库实现

dom-to-image是另一个轻量级解决方案，特别适合现代浏览器：

npm install dom-to-image

使用示例：

import domtoimage from 'dom-to-image';

methods: {
  takeScreenshot() {
    domtoimage.toPng(document.getElementById('target'))
      .then(dataUrl => {
        const img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
      })
      .catch(error => {
        console.error('截图出错:', error);
      });
  }
}

使用浏览器原生API

现代浏览器支持MediaDevices API，可直接捕获屏幕：

vue前端实现截图功能

methods: {
  async captureScreen() {
    try {
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: { displaySurface: 'browser' }
      });
      const track = stream.getVideoTracks()[0];
      const image = new ImageCapture(track);
      const bitmap = await image.grabFrame();
      track.stop();

      const canvas = document.createElement('canvas');
      canvas.width = bitmap.width;
      canvas.height = bitmap.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(bitmap, 0, 0);
      const imgData = canvas.toDataURL('image/png');
      this.downloadImage(imgData, 'screen-capture.png');
    } catch (err) {
      console.error("Error:", err);
    }
  }
}

实现特定区域截图

针对页面特定区域截图，可以结合CSS选择器：

captureElement(selector) {
  html2canvas(document.querySelector(selector), {
    allowTaint: true,
    useCORS: true,
    scale: 2 // 提高分辨率
  }).then(canvas => {
    // 处理canvas结果
  });
}

处理跨域资源问题

当截图包含跨域图片时，需要配置：

html2canvas(element, {
  useCORS: true,  // 启用CORS
  allowTaint: true,  // 允许污染画布
  logging: true,  // 开启日志
  foreignObjectRendering: true  // 处理SVG等
});

添加水印功能

截图后添加水印：

vue前端实现截图功能

addWatermark(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.font = '20px Arial';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.fillText('Watermark Text', 10, canvas.height - 20);
  return canvas;
}

响应式截图处理

针对不同设备像素比优化：

const scale = window.devicePixelRatio || 1;
html2canvas(element, {
  scale: scale,
  width: element.offsetWidth * scale,
  height: element.offsetHeight * scale
});

保存为不同格式

支持多种图片格式输出：

// PNG格式
canvas.toDataURL('image/png');

// JPEG格式
canvas.toDataURL('image/jpeg', 0.8); // 0.8表示质量

使用Vue指令封装

创建可复用的Vue指令：

Vue.directive('screenshot', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      html2canvas(binding.value || document.body).then(canvas => {
        // 处理结果
      });
    });
  }
});

使用方式：