vue实现截图功能

使用html2canvas库实现截图

在Vue项目中安装html2canvas库

npm install html2canvas --save

引入html2canvas并在方法中使用

import html2canvas from 'html2canvas';

methods: {
  async captureScreenshot() {
    const element = document.getElementById('capture-area');
    const canvas = await html2canvas(element);
    const image = canvas.toDataURL('image/png');
    this.downloadImage(image, 'screenshot.png');
  },
  downloadImage(dataUrl, filename) {
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

使用canvas原生API实现截图

创建canvas元素并绘制DOM内容

methods: {
  captureWithCanvas() {
    const element = document.getElementById('target-element');
    const canvas = document.createElement('canvas');
    canvas.width = element.offsetWidth;
    canvas.height = element.offsetHeight;
    const ctx = canvas.getContext('2d');

    // 绘制内容到canvas
    // 注意：直接绘制DOM有限制，可能需要转换为图像

    const image = canvas.toDataURL('image/png');
    this.downloadImage(image, 'canvas-screenshot.png');
  }
}

使用第三方截图组件

安装vue-web-screen-shot组件

npm install vue-web-screen-shot --save

在Vue中使用组件

import screenShot from 'vue-web-screen-shot';

export default {
  components: {
    screenShot
  },
  methods: {
    handleComplete(data) {
      // data包含截图数据
      console.log(data);
    }
  }
}

模板中使用

<screen-shot @complete="handleComplete">
  <div>需要截图的内容</div>
</screen-shot>

浏览器原生API实现截图（仅限部分浏览器）

使用getDisplayMedia API

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

      // 将bitmap转换为可下载的图像
      const canvas = document.createElement('canvas');
      canvas.width = bitmap.width;
      canvas.height = bitmap.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(bitmap, 0, 0);
      const image = canvas.toDataURL('image/png');
      this.downloadImage(image, 'browser-screenshot.png');

      videoTrack.stop();
    } catch (error) {
      console.error('截图失败:', error);
    }
  }
}

截图后的图像处理

添加水印功能

methods: {
  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;
  }
}

调整图像质量

methods: {
  adjustQuality(canvas) {
    // 质量参数0-1
    return canvas.toDataURL('image/jpeg', 0.8);
  }
}