当前位置：首页 > HTML

h5实现网页截屏

2026-01-13 23:38:05HTML

实现网页截屏的方法

使用html2canvas库

html2canvas是一个流行的JavaScript库，可以将网页内容转换为Canvas图像。安装方式如下：

npm install html2canvas

基本用法示例：

import html2canvas from 'html2canvas';

const element = document.getElementById('capture-area');
html2canvas(element).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是另一个轻量级解决方案，支持PNG、JPEG等格式输出：

import domtoimage from 'dom-to-image';

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

浏览器原生API

现代浏览器支持Canvas的截屏能力：

const videoElem = document.querySelector('video');
const canvas = document.createElement('canvas');
canvas.width = videoElem.videoWidth;
canvas.height = videoElem.videoHeight;
canvas.getContext('2d').drawImage(videoElem, 0, 0);

处理跨域内容

遇到跨域资源时需设置属性：

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

移动端适配

针对移动设备需添加视口配置：

const options = {
  scale: window.devicePixelRatio,
  width: element.offsetWidth,
  height: element.offsetHeight
};

性能优化建议

对于复杂页面：

设置适当的缩放比例
分批渲染大型页面

关闭不需要的阴影效果

{
scale: 1,
ignoreElements: (el) => el.classList.contains('no-capture'),
logging: false
}

保存为PDF

配合jsPDF库可生成PDF：

html2canvas(element).then(canvas => {
  const pdf = new jsPDF();
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0);
  pdf.save('page.pdf');
});