Function captureAndDownloadPng

src/utils/snapCapture.ts:200–291

(rootEl: HTMLElement, options?: CaptureOptions)

}

export async function captureAndDownloadPng(rootEl: HTMLElement, options?: CaptureOptions): Promise<void> {
  // 提高默认清晰度：maxExportWidth 2160（2K），minScale 1（不缩小）
  const maxExportWidth = options?.maxExportWidth ?? 2160
  const minScale = options?.minScale ?? 1
  const fullContent = options?.fullContent !== false // 默认为 true

  // 获取元素的实际背景色（优先用户指定，否则自动检测）
  const bgColor = options?.backgroundColor ?? getEffectiveBackground(rootEl)

  // 计算元素尺寸：如果需要完整内容，使用 scrollWidth/scrollHeight
  const elementWidth = fullContent ? rootEl.scrollWidth : rootEl.getBoundingClientRect().width
  let captureScale = Math.min(1, maxExportWidth / Math.max(1, elementWidth))
  captureScale = Math.max(minScale, captureScale)

  const snapOptions: Record<string, unknown> = {
    scale: captureScale,
    // 禁用字体嵌入可以避免某些 Unicode 字符导致的 encodeURIComponent 错误
    embedFonts: options?.embedFonts ?? false,
    compress: options?.compress ?? true,
    backgroundColor: bgColor,
    crossOrigin: options?.crossOrigin ?? 'anonymous',
  }

  const result = await (
    snapdom as (
      element: Element,
      options: Record<string, unknown>
    ) => Promise<{
      toCanvas: () => Promise<unknown>
      toPng: (options?: Record<string, unknown>) => Promise<unknown>
      toImg: () => Promise<HTMLImageElement>
    }>
  )(rootEl, snapOptions)

  // Preferred: Canvas path, apply background and scale again if needed, export PNG
  try {
    const canvas: unknown = await result.toCanvas()
    if (canvas && (canvas as HTMLCanvasElement).toDataURL) {
      const srcCanvas = canvas as HTMLCanvasElement
      const outCanvas = document.createElement('canvas')
      const scale2 = srcCanvas.width > maxExportWidth ? maxExportWidth / srcCanvas.width : 1
      outCanvas.width = Math.round(srcCanvas.width * scale2)
      outCanvas.height = Math.round(srcCanvas.height * scale2)
      const ctx = outCanvas.getContext('2d')
      if (ctx) {
        ctx.fillStyle = bgColor
        ctx.fillRect(0, 0, outCanvas.width, outCanvas.height)
        ctx.drawImage(srcCanvas, 0, 0, outCanvas.width, outCanvas.height)
        const url = outCanvas.toDataURL('image/png')
        const ts = new Date().toISOString().replace(/[:.]/g, '-')
        triggerDownload(url, options?.filename ?? `wlb-report-${ts}.png`)
        return
      }
    }
  } catch {
    // fallback below
  }