当前位置：首页 > HTML

H5手机端实现长截图

2026-01-15 21:20:47HTML

实现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();
  });

手动实现滚动截图

对于需要精确控制滚动行为的场景，可以手动实现分屏截图后拼接。

H5手机端实现长截图

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');
};