当前位置：首页 > VUE

vue实现屏幕截图

2026-02-17 02:30:20VUE

Vue实现屏幕截图的方法

使用html2canvas库

安装html2canvas库：

npm install html2canvas

在Vue组件中引入并使用：

import html2canvas from 'html2canvas';

export default {
  methods: {
    captureScreen() {
      html2canvas(document.body).then(canvas => {
        const link = document.createElement('a');
        link.download = 'screenshot.png';
        link.href = canvas.toDataURL();
        link.click();
      });
    }
  }
}

使用vue-web-capture插件

安装插件：

npm install vue-web-capture

在Vue项目中使用：

import VueWebCapture from 'vue-web-capture';

Vue.use(VueWebCapture);

export default {
  methods: {
    capture() {
      this.$capture().then(img => {
        const link = document.createElement('a');
        link.download = 'capture.png';
        link.href = img;
        link.click();
      });
    }
  }
}

实现局部截图功能

针对特定DOM元素截图：

export default {
  methods: {
    captureElement() {
      const element = document.getElementById('target-element');
      html2canvas(element).then(canvas => {
        canvas.toBlob(blob => {
          const link = document.createElement('a');
          link.download = 'element-screenshot.png';
          link.href = URL.createObjectURL(blob);
          link.click();
        });
      });
    }
  }
}

添加截图配置选项

html2canvas支持多种配置：

html2canvas(document.body, {
  backgroundColor: null,
  scale: 2,
  logging: false,
  useCORS: true
}).then(canvas => {
  // 处理canvas
});

处理跨域资源问题

对于包含跨域图片的内容：

html2canvas(element, {
  allowTaint: true,
  useCORS: true
}).then(canvas => {
  // 处理canvas
});

保存截图到服务器

将截图通过API发送到服务器：

html2canvas(document.body).then(canvas => {
  canvas.toBlob(blob => {
    const formData = new FormData();
    formData.append('screenshot', blob);

    axios.post('/api/save-screenshot', formData)
      .then(response => {
        console.log('截图已保存');
      });
  });
});

实现实时预览功能

在截图前显示预览：

export default {
  data() {
    return {
      previewImage: null
    };
  },
  methods: {
    showPreview() {
      html2canvas(document.body).then(canvas => {
        this.previewImage = canvas.toDataURL();
      });
    }
  }
}