当前位置：首页 > VUE

vue实现页面截屏

2026-01-12 02:28:52VUE

使用html2canvas库实现截屏

安装html2canvas库

npm install html2canvas --save

在Vue组件中引入并使用

import html2canvas from 'html2canvas';

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

使用vue-html2canvas插件

安装插件

npm install vue-html2canvas

全局注册或局部使用

import VueHtml2Canvas from 'vue-html2canvas';

Vue.use(VueHtml2Canvas);

组件中使用

this.$html2canvas(element, {
  backgroundColor: null,
  logging: false,
  useCORS: true
}).then(canvas => {
  // 处理canvas
});

实现指定区域截屏

模板部分

<div id="capture-area" ref="captureRef">
  <!-- 需要截屏的内容 -->
</div>
<button @click="captureArea">截屏</button>

方法实现

captureArea() {
  const element = this.$refs.captureRef;
  html2canvas(element, {
    allowTaint: true,
    useCORS: true,
    scale: 1 // 缩放比例
  }).then(canvas => {
    document.body.appendChild(canvas);
  });
}

处理跨域图片问题

配置html2canvas选项

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

截屏后分享功能

生成图片后分享

captureAndShare() {
  html2canvas(document.body).then(canvas => {
    canvas.toBlob(blob => {
      if (navigator.share) {
        navigator.share({
          files: [new File([blob], 'screenshot.png', { type: 'image/png' })],
          title: '截图分享',
          text: '查看我的截图'
        });
      }
    });
  });
}