前端vue实现截图功能

使用html2canvas库实现截图

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

npm install html2canvas

在Vue组件中使用：

import html2canvas from 'html2canvas';

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

使用dom-to-image库实现截图

dom-to-image是另一个轻量级的选择，专门用于将DOM节点转换为图像。安装dom-to-image：

npm install dom-to-image

在Vue组件中使用：

import domtoimage from 'dom-to-image';

methods: {
  captureScreenshot() {
    domtoimage.toPng(document.getElementById('capture-area'))
      .then(imgData => {
        const link = document.createElement('a');
        link.download = 'screenshot.png';
        link.href = imgData;
        link.click();
      });
  }
}

实现区域选择截图

结合html2canvas和鼠标事件可以实现区域选择截图：

data() {
  return {
    isSelecting: false,
    startX: 0,
    startY: 0,
    endX: 0,
    endY: 0
  };
},
methods: {
  startSelection(e) {
    this.isSelecting = true;
    this.startX = e.clientX;
    this.startY = e.clientY;
  },
  endSelection(e) {
    this.isSelecting = false;
    this.endX = e.clientX;
    this.endY = e.clientY;
    this.captureSelectedArea();
  },
  captureSelectedArea() {
    const width = Math.abs(this.endX - this.startX);
    const height = Math.abs(this.endY - this.startY);
    const left = Math.min(this.startX, this.endX);
    const top = Math.min(this.startY, this.endY);

    html2canvas(document.body, {
      x: left,
      y: top,
      width: width,
      height: height,
      windowWidth: document.body.scrollWidth,
      windowHeight: document.body.scrollHeight
    }).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.download = 'selected-area.png';
      link.href = imgData;
      link.click();
    });
  }
}

实现截图编辑功能

截图后可以使用canvas API进行简单编辑：

methods: {
  editScreenshot() {
    html2canvas(document.querySelector("#capture-area")).then(canvas => {
      const ctx = canvas.getContext('2d');
      // 添加文字
      ctx.font = '20px Arial';
      ctx.fillStyle = 'red';
      ctx.fillText('Sample Text', 10, 50);

      // 添加矩形
      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 5;
      ctx.strokeRect(100, 100, 200, 200);

      const imgData = canvas.toDataURL('image/png');
      this.editedImage = imgData;
    });
  }
}

注意事项

使用截图功能时需注意跨域问题，如果页面中包含跨域图片，需要在html2canvas配置中设置：

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

对于复杂的DOM结构，可能需要调整scale参数提高截图质量：

html2canvas(element, {
  scale: 2  // 提高分辨率
});