JS实现网页截图的三种方式对比

const captureForHtml2canvas = async () => {
  let time1 = Date.now()
  const el = document.getElementById('captureBody');
  // 把 DOM 节点转成 canvas
  const canvas = await html2canvas(el, {
    backgroundColor: null, 
    useCORS: true,         // 允许跨域图片（如果有）
  });

  let time2 = Date.now()
  console.log(`html2canvas 生成图片耗时：${time2 - time1}ms`)
  // 转成 base64 PNG
  const dataUrl = canvas.toDataURL("image/png");

  // 生成下载链接并触发
  const link = document.createElement("a");
  link.href = dataUrl;
  link.download = "captureForHtml2canvas.png";
  link.click();
}
const captureForSnapdom = async () => {
  let time1 = Date.now()
  const el = document.getElementById('captureBody');
  // const result = await snapdom(el, { scale: 1 });
  const canvas = await snapdom.toCanvas(el)
  let time2 = Date.now()
  console.log(`snapdom 生成图片耗时：${time2 - time1}ms`)
  // 转成 base64 PNG
  const dataUrl = canvas.toDataURL("image/png");
  // 生成下载链接并触发
  var link = document.createElement('a');
  link.download = 'captureForSnapdom.png';
  link.href = dataUrl;
  link.click();
}
const captureForHtml2img = () => {
  let time1 = Date.now()
  htmlToImage
  .toCanvas(document.getElementById('captureBody'))
  .then((canvas) => {
    let time2 = Date.now()
    console.log(`html2img 生成图片耗时：${time2 - time1}ms`)
    const dataUrl = canvas.toDataURL("image/png");
    var link = document.createElement('a');
    link.download = 'captureForHtml2img.png';
    link.href = dataUrl;
    link.click();
  });
}

const xmlns = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(xmlns, 'svg');
const foreignObject = document.createElementNS(xmlns, 'foreignObject');
svg.appendChild(foreignObject);
foreignObject.appendChild(cloneNode);

// 加载svg
const img = new Image();
img.onload = () => {
    resolve(img);
};
img.onerror = reject;

img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;

// 画出来
ctx.drawImage(img, -this.options.x * this.options.scale, -this.options.y * this.options.scale);

export const parseStackingContexts = (container: ElementContainer): StackingContext => {
    // 1. 把 DOM 容器包一层 "可绘制对象"
    const paintContainer = new ElementPaint(container, null);

    // 2. 用这个 paintContainer 创建一个根 stacking context
    const root = new StackingContext(paintContainer);

    // 3. 创建一个数组，用来收集 "list-item" 元素
    const listItems: ElementPaint[] = [];

    // 4. 递归解析 DOM 树，建立 stacking context 树
    parseStackTree(paintContainer, root, root, listItems);

    // 5. 额外处理 <li>（list-item）相关的 marker（比如列表圆点/数字）
    processListItems(paintContainer.container, listItems);

    // 6. 返回整个 root stacking context
    return root;
};

//小图
html2canvas （foreignObject方式）生成图片耗时：220ms
html2canvas 生成图片耗时：246ms
// 大图
html2canvas （foreignObject方式）生成图片耗时：337ms
html2canvas 生成图片耗时：529ms

const svgNS = "http://www.w3.org/2000/svg";
const fo = document.createElementNS(svgNS, "foreignObject");
fo.setAttribute("width", "100%");
fo.setAttribute("height", "100%");
const styleTag = document.createElement("style");
styleTag.textContent = baseCSS + fontsCSS + "svg{overflow:visible;}" + classCSS;
fo.appendChild(styleTag);
fo.appendChild(clone);
const serializer = new XMLSerializer();
const foString = serializer.serializeToString(fo);
const svgHeader = `<svg xmlns="${svgNS}" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
const svgFooter = "</svg>";
svgString = svgHeader + foString + svgFooter;
dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;

export async function nodeToDataURL(
  node: HTMLElement,
  width: number,
  height: number,
): Promise<string> {
  const xmlns = 'http://www.w3.org/2000/svg'
  const svg = document.createElementNS(xmlns, 'svg')
  const foreignObject = document.createElementNS(xmlns, 'foreignObject')

  svg.appendChild(foreignObject)
  foreignObject.appendChild(node)
  return svgToDataURL(svg)
}