h5实现网页截屏
实现网页截屏的方法
使用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');
});常见问题处理
- 字体渲染异常：确保所有字体已加载完成
- 缺失图片：检查跨域策略
- 模糊问题：调整scale参数提升分辨率
各方案需根据具体场景选择，html2canvas适合大多数DOM渲染场景，而原生API更适合视频等媒体元素捕获。
