vue实现页面截屏

使用html2canvas库实现截屏

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

npm install html2canvas

在Vue组件中引入并使用：

import html2canvas from 'html2canvas';

methods: {
  captureScreen() {
    html2canvas(document.getElementById('capture-area')).then(canvas => {
      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;
    link.click();
  }
}

使用vue-html2canvas插件

vue-html2canvas是专为Vue封装的截图插件，简化了使用流程：

npm install vue-html2canvas

组件中使用示例：

import VueHtml2Canvas from 'vue-html2canvas';

export default {
  components: { VueHtml2Canvas },
  methods: {
    takeScreenshot() {
      this.$refs.captureComponent.capture().then(image => {
        this.$refs.captureComponent.downloadImage(image, 'screenshot.png');
      });
    }
  }
}

实现指定区域截屏

通过ref指定需要截图的DOM区域：

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

<script>
export default {
  methods: {
    async captureArea() {
      const canvas = await html2canvas(this.$refs.targetElement);
      const imgData = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.href = imgData;
      link.download = 'area-screenshot.png';
      link.click();
    }
  }
}
</script>

处理截图中的跨域资源

当页面包含跨域图片时，需要配置allowTaint或useCORS选项：

html2canvas(element, {
  allowTaint: true,
  useCORS: true,
  logging: true,
  scale: 2 // 提高截图质量
}).then(canvas => {
  // 处理canvas
});

截图后处理与保存

可以将截图显示在页面或发送到服务器：

// 显示在页面
displayScreenshot(canvas) {
  const img = new Image();
  img.src = canvas.toDataURL('image/png');
  document.body.appendChild(img);
}

// 上传到服务器
uploadScreenshot(canvas) {
  canvas.toBlob(blob => {
    const formData = new FormData();
    formData.append('screenshot', blob, 'screenshot.png');
    axios.post('/api/upload', formData);
  }, 'image/png');
}

使用dom-to-image替代方案

dom-to-image是另一个截图库，在某些场景下性能更好：

npm install dom-to-image

使用示例：

import domtoimage from 'dom-to-image';

domtoimage.toPng(document.getElementById('target'))
  .then(dataUrl => {
    const img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  });

移动端适配处理

针对移动设备需要特别处理viewport和缩放：

html2canvas(element, {
  scrollX: -window.scrollX,
  scrollY: -window.scrollY,
  windowWidth: document.documentElement.offsetWidth,
  windowHeight: document.documentElement.offsetHeight,
  scale: window.devicePixelRatio
});

截图质量优化

提高截图分辨率和质量的方法：

html2canvas(element, {
  scale: 2, // 2倍缩放
  quality: 1, // 0-1质量值
  dpi: 192, // 提高DPI
  letterRendering: true // 改善文字渲染
});