H5手机端实现长截图
实现H5手机端长截图的方法
使用html2canvas库
html2canvas是一个流行的JavaScript库，可以将网页内容渲染为Canvas图像。通过遍历页面所有元素，将其绘制到Canvas上，最终导出为图片。
import html2canvas from 'html2canvas';
const captureLongScreenshot = async (element) => {
const canvas = await html2canvas(element, {
scrollY: -window.scrollY,
height: element.scrollHeight,
windowHeight: element.scrollHeight
});
const image = canvas.toDataURL('image/png');
return image;
};使用dom-to-image库
dom-to-image是另一个轻量级库，支持将DOM节点转换为图片。适用于需要更高性能的场景。
import domtoimage from 'dom-to-image';
domtoimage.toPng(document.getElementById('content'))
.then(function (dataUrl) {
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = dataUrl;
link.click();
});手动实现滚动截图
对于需要精确控制滚动行为的场景，可以手动实现分屏截图后拼接。
const captureByScroll = async (element) => {
let totalHeight = element.scrollHeight;
let viewportHeight = window.innerHeight;
let canvasList = [];
for (let y = 0; y < totalHeight; y += viewportHeight) {
window.scrollTo(0, y);
const canvas = await html2canvas(element);
canvasList.push(canvas);
}
// 合并所有Canvas
const finalCanvas = document.createElement('canvas');
finalCanvas.width = element.offsetWidth;
finalCanvas.height = totalHeight;
const ctx = finalCanvas.getContext('2d');
let yOffset = 0;
canvasList.forEach(canvas => {
ctx.drawImage(canvas, 0, yOffset);
yOffset += canvas.height;
});
return finalCanvas.toDataURL('image/png');
};注意事项
- 跨域资源需要配置CORS
- 固定定位元素可能需要特殊处理
- 大页面渲染可能导致内存问题
- iOS设备存在滚动截图的特殊限制
性能优化建议
- 使用will-change: transform提升渲染性能
- 对于复杂页面可分区块渲染
- 考虑使用Web Worker处理图像拼接
- 适当降低图像质量减少内存占用
