const captureForHtml2canvas = async () => {
  let time1 = Date.now()
  const el = document.getElementById('captureBody');
  // 把 DOM 節(jié)點(diǎn)轉(zhuǎn)成 canvas
  const canvas = await html2canvas(el, {
    backgroundColor: null, 
    useCORS: true,         // 允許跨域圖片（如果有）
  });

  let time2 = Date.now()
  console.log(`html2canvas 生成圖片耗時(shí)：${time2 - time1}ms`)
  // 轉(zhuǎn)成 base64 PNG
  const dataUrl = canvas.toDataURL("image/png");

  // 生成下載鏈接并觸發(fā)
  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 生成圖片耗時(shí)：${time2 - time1}ms`)
  // 轉(zhuǎn)成 base64 PNG
  const dataUrl = canvas.toDataURL("image/png");
  // 生成下載鏈接并觸發(fā)
  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 生成圖片耗時(shí)：${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 容器包一層 "可繪制對(duì)象"
    const paintContainer = new ElementPaint(container, null);

    // 2. 用這個(gè) paintContainer 創(chuàng)建一個(gè)根 stacking context
    const root = new StackingContext(paintContainer);

    // 3. 創(chuàng)建一個(gè)數(shù)組，用來收集 "list-item" 元素
    const listItems: ElementPaint[] = [];

    // 4. 遞歸解析 DOM 樹，建立 stacking context 樹
    parseStackTree(paintContainer, root, root, listItems);

    // 5. 額外處理 <li>（list-item）相關(guān)的 marker（比如列表圓點(diǎn)/數(shù)字）
    processListItems(paintContainer.container, listItems);

    // 6. 返回整個(gè) root stacking context
    return root;
};

//小圖
html2canvas （foreignObject方式）生成圖片耗時(shí)：220ms
html2canvas 生成圖片耗時(shí)：246ms
// 大圖
html2canvas （foreignObject方式）生成圖片耗時(shí)：337ms
html2canvas 生成圖片耗時(shí)：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)
}