From d5c17e1cf1cdf4afd1ad2b560fbe8d467d608947 Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Fri, 16 Aug 2024 15:31:51 +0800
Subject: [PATCH 01/12] feat: add  option to resolve problems which caused by
 html that has large amount of sub nodes

---
 README.md         |  9 +++++++++
 src/clone-node.ts | 12 ++++++------
 src/index.ts      |  2 +-
 src/types.ts      |  5 +++++
 src/util.ts       | 27 +++++++++++++++++++++++++++
 5 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 782d2525..1b1e0a8b 100644
--- a/README.md
+++ b/README.md
@@ -292,6 +292,15 @@ A string indicating the image format. The default type is image/png; that type i
 When supplied, the toCanvas function will return a blob matching the given image type and quality. 
 
 Defaults to `image/png`  
+  
+
+### usePageCss
+
+Use `true` to add a `<style>` tag in svg content which imports all styles of current html page, and do not add computed styles to every node any more(this make svg content so large that Firefox throw errors while load svg as image).
+This will make the svg content much smaller, to resolve problems which caused by html that has large amount of sub nodes.
+
+
+Defaults to `false`  
 
 ## Browsers
 
diff --git a/src/clone-node.ts b/src/clone-node.ts
index 500ce332..683f7f30 100644
--- a/src/clone-node.ts
+++ b/src/clone-node.ts
@@ -133,11 +133,11 @@ function cloneCSSStyle<T extends HTMLElement>(nativeNode: T, clonedNode: T) {
       ) {
         value = 'block'
       }
-      
+
       if (name === 'd' && clonedNode.getAttribute('d')) {
         value = `path(${clonedNode.getAttribute('d')})`
       }
-      
+
       targetStyle.setProperty(
         name,
         value,
@@ -170,10 +170,10 @@ function cloneSelectValue<T extends HTMLElement>(nativeNode: T, clonedNode: T) {
   }
 }
 
-function decorate<T extends HTMLElement>(nativeNode: T, clonedNode: T): T {
+function decorate<T extends HTMLElement>(nativeNode: T, clonedNode: T, usePageCss?: boolean): T {
   if (isInstanceOfElement(clonedNode, Element)) {
-    cloneCSSStyle(nativeNode, clonedNode)
-    clonePseudoElements(nativeNode, clonedNode)
+    if (!usePageCss) cloneCSSStyle(nativeNode, clonedNode)
+    if (!usePageCss) clonePseudoElements(nativeNode, clonedNode)
     cloneInputValue(nativeNode, clonedNode)
     cloneSelectValue(nativeNode, clonedNode)
   }
@@ -240,6 +240,6 @@ export async function cloneNode<T extends HTMLElement>(
   return Promise.resolve(node)
     .then((clonedNode) => cloneSingleNode(clonedNode, options) as Promise<T>)
     .then((clonedNode) => cloneChildren(node, clonedNode, options))
-    .then((clonedNode) => decorate(node, clonedNode))
+    .then((clonedNode) => decorate(node, clonedNode, options.usePageCss))
     .then((clonedNode) => ensureSVGSymbols(clonedNode, options))
 }
diff --git a/src/index.ts b/src/index.ts
index 2de59a30..0c5c9bfa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,7 +21,7 @@ export async function toSvg<T extends HTMLElement>(
   await embedWebFonts(clonedNode, options)
   await embedImages(clonedNode, options)
   applyStyle(clonedNode, options)
-  const datauri = await nodeToDataURL(clonedNode, width, height)
+  const datauri = await nodeToDataURL(clonedNode, width, height, options.usePageCss)
   return datauri
 }
 
diff --git a/src/types.ts b/src/types.ts
index b511363f..d5616f42 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -91,4 +91,9 @@ export interface Options {
    *
    */
   fetchRequestInit?: RequestInit
+  /*
+   * Use a <style> in svg to import all styles of current html page, and do not add computed styles to every node any more.
+   * This will make the svg content very small, to resolve problems when html has large amount of sub nodes.
+   * */
+  usePageCss?: boolean
 }
diff --git a/src/util.ts b/src/util.ts
index d418b621..29046d8d 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -203,6 +203,7 @@ export async function nodeToDataURL(
   node: HTMLElement,
   width: number,
   height: number,
+  usePageCss?: boolean,
 ): Promise<string> {
   const xmlns = 'http://www.w3.org/2000/svg'
   const svg = document.createElementNS(xmlns, 'svg')
@@ -220,6 +221,11 @@ export async function nodeToDataURL(
 
   svg.appendChild(foreignObject)
   foreignObject.appendChild(node)
+  if (usePageCss) {
+    const style = document.createElementNS(xmlns, 'style')
+    style.innerHTML = await getStyles()
+    svg.insertBefore(style, foreignObject)
+  }
   return svgToDataURL(svg)
 }
 
@@ -240,3 +246,24 @@ export const isInstanceOfElement = <
     isInstanceOfElement(nodePrototype, instance)
   )
 }
+
+export function getStyles() {
+  const styles = document.querySelectorAll('style,link[rel="stylesheet"]')
+  const ps: Array<Promise<string>> = []
+  toArray(styles).forEach((el) => {
+    const e = el as Element
+    if (e.tagName === 'LINK') {
+      const href = e.getAttribute('href')
+      if (href) ps.push(getCssText(href).catch(() => ''))
+    } else {
+      ps.push(Promise.resolve(e.innerHTML))
+    }
+  })
+  return Promise.all(ps).then((arr) => {
+    return arr.join('\n\n')
+  })
+
+  function getCssText(url: string) {
+    return fetch(url).then((r) => r.text())
+  }
+}

From f5afad4983e44d6816a3e2cbe38a9d952c3e2dff Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Fri, 16 Aug 2024 19:31:01 +0800
Subject: [PATCH 02/12] fix: if ratio=2 and style.border='1px', in html it is
 actually rendered to 1px, but in <img src="svg"> it is rendered to 2px. Then
 height is different and the bottom 1px is lost, 10 nodes will lost 10px.

---
 src/util.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/util.ts b/src/util.ts
index 29046d8d..dc32da89 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -209,8 +209,10 @@ export async function nodeToDataURL(
   const svg = document.createElementNS(xmlns, 'svg')
   const foreignObject = document.createElementNS(xmlns, 'foreignObject')
 
-  svg.setAttribute('width', `${width}`)
-  svg.setAttribute('height', `${height}`)
+  // fix: if ratio=2 and style.border='1px', in html it is actually rendered to 1px, but in <img src="svg"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.
+  var ratio = self.devicePixelRatio;
+  svg.setAttribute('width', `${width / ratio}`)
+  svg.setAttribute('height', `${height / ratio}`)
   svg.setAttribute('viewBox', `0 0 ${width} ${height}`)
 
   foreignObject.setAttribute('width', '100%')
@@ -226,6 +228,7 @@ export async function nodeToDataURL(
     style.innerHTML = await getStyles()
     svg.insertBefore(style, foreignObject)
   }
+
   return svgToDataURL(svg)
 }
 

From 5b7cfe25bc2709df2097763b80b4ae9264059972 Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Fri, 16 Aug 2024 19:37:23 +0800
Subject: [PATCH 03/12] fix: use getPixelRatio()

---
 src/util.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util.ts b/src/util.ts
index dc32da89..61fbebcd 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -210,7 +210,7 @@ export async function nodeToDataURL(
   const foreignObject = document.createElementNS(xmlns, 'foreignObject')
 
   // fix: if ratio=2 and style.border='1px', in html it is actually rendered to 1px, but in <img src="svg"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.
-  var ratio = self.devicePixelRatio;
+  var ratio = getPixelRatio();
   svg.setAttribute('width', `${width / ratio}`)
   svg.setAttribute('height', `${height / ratio}`)
   svg.setAttribute('viewBox', `0 0 ${width} ${height}`)

From 8ea57e6a0c2f3f176b488a8223f65bafdfe4a74c Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Sat, 17 Aug 2024 21:56:09 +0800
Subject: [PATCH 04/12] feat: add `toCanvasList` and `toImage` method to get
 rid of the limitation of canvas size, so this can export a very large htm.
 And use a ``getMaxCanvasHeight` method to raise the canvas size limit from
 16384 to 65535(Chrome) or 32767(Firefox)

---
 README.md    | 23 +++++++++++++++++
 src/index.ts | 56 ++++++++++++++++++++++++++++++++++++++---
 src/util.ts  | 70 ++++++++++++++++++++++++++++++++++++++++++----------
 3 files changed, 133 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 1b1e0a8b..0d5629a9 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,9 @@ All the top level functions accept DOM node and rendering options, and return a
 - [toSvg](#toSvg)
 - [toJpeg](#toJpeg)
 - [toBlob](#toBlob)
+- [toImage](#toImage)
 - [toCanvas](#toCanvas)
+- [toCanvasList](#toCanvasList)
 - [toPixelData](#toPixelData)
 
 Go with the following examples.
@@ -114,6 +116,16 @@ htmlToImage.toBlob(document.getElementById('my-node'))
   });
 ```
 
+#### toImage
+Get a HTMLImageElement, which is a svg image that you can scale it to a big size and it will not blurred.
+
+```js
+htmlToImage.toImage(document.getElementById('my-node'))
+  .then(function (img) {
+    document.body.appendChild(img);
+  });
+```
+
 #### toCanvas
 Get a HTMLCanvasElement, and display it right away:
 
@@ -124,6 +136,17 @@ htmlToImage.toCanvas(document.getElementById('my-node'))
   });
 ```
 
+#### toCanvasList
+Get a array of HTMLCanvasElement. Not like `toCanvas` which is limited by [canvas size](https://jhildenbiddle.github.io/canvas-size/#/?id=test-results),
+ `toCanvasList` can get rid of the limitation of canvas size, so this can export a very large html:
+
+```js
+htmlToImage.toCanvasList(document.getElementById('my-node'))
+  .then(function (canvasList) {
+    canvasList.map(canvas => document.body.appendChild(canvas));
+  });
+```
+
 #### toPixelData
 Get the raw pixel data as a [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) with every 4 array elements representing the RGBA data of a pixel:
 
diff --git a/src/index.ts b/src/index.ts
index 0c5c9bfa..c5b87ca8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,7 @@ import {
   canvasToBlob,
   nodeToDataURL,
   checkCanvasDimensions,
+  getDimensionLimit,
 } from './util'
 
 export async function toSvg<T extends HTMLElement>(
@@ -25,14 +26,20 @@ export async function toSvg<T extends HTMLElement>(
   return datauri
 }
 
+export async function toImage<T extends HTMLElement>(
+  node: T,
+  options: Options = {},
+): Promise<HTMLImageElement> {
+  const svg = await toSvg(node, options)
+  return createImage(svg)
+}
+
 export async function toCanvas<T extends HTMLElement>(
   node: T,
   options: Options = {},
 ): Promise<HTMLCanvasElement> {
+  const img = await toImage(node, options)
   const { width, height } = getImageSize(node, options)
-  const svg = await toSvg(node, options)
-  const img = await createImage(svg)
-
   const canvas = document.createElement('canvas')
   const context = canvas.getContext('2d')!
   const ratio = options.pixelRatio || getPixelRatio()
@@ -58,6 +65,49 @@ export async function toCanvas<T extends HTMLElement>(
   return canvas
 }
 
+export async function toCanvasList<T extends HTMLElement>(
+  node: T,
+  options: Options = {},
+): Promise<Array<HTMLCanvasElement>> {
+  const img = await toImage(node, options)
+  const { width, height } = getImageSize(node, options)
+  const ratio = options.pixelRatio || getPixelRatio()
+  let canvasWidth = (options.canvasWidth || width) * ratio
+  let canvasHeight = (options.canvasHeight || height) * ratio
+  const dimensionLimit = getDimensionLimit()
+  if (canvasWidth > dimensionLimit) {
+    canvasHeight *= dimensionLimit / canvasWidth
+    canvasWidth = dimensionLimit
+  }
+
+  const result: Array<HTMLCanvasElement> = []
+  const scale = canvasWidth / img.width
+  for (let curY = 0; curY < canvasHeight; curY += dimensionLimit) {
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')!
+    const height1 = Math.min(canvasHeight - curY, dimensionLimit)
+    canvas.width = canvasWidth
+    canvas.height = height1
+    if (options.backgroundColor) {
+      context.fillStyle = options.backgroundColor
+      context.fillRect(0, 0, canvas.width, canvas.height)
+    }
+    context.drawImage(
+      img,
+      0,
+      curY / scale,
+      canvasWidth / scale,
+      height1 / scale,
+      0,
+      0,
+      canvasWidth,
+      height1,
+    )
+    result.push(canvas)
+  }
+  return result
+}
+
 export async function toPixelData<T extends HTMLElement>(
   node: T,
   options: Options = {},
diff --git a/src/util.ts b/src/util.ts
index 61fbebcd..37ca7f20 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -129,19 +129,62 @@ export function checkCanvasDimensions(canvas: HTMLCanvasElement) {
         canvas.height *= canvasDimensionLimit / canvas.width
         canvas.width = canvasDimensionLimit
       } else {
-        canvas.width *= canvasDimensionLimit / canvas.height
-        canvas.height = canvasDimensionLimit
+        const height1 = getMaxCanvasHeight(canvas.width)
+        canvas.width *= height1 / canvas.height
+        canvas.height = height1
       }
     } else if (canvas.width > canvasDimensionLimit) {
       canvas.height *= canvasDimensionLimit / canvas.width
       canvas.width = canvasDimensionLimit
     } else {
-      canvas.width *= canvasDimensionLimit / canvas.height
-      canvas.height = canvasDimensionLimit
+      const height = getMaxCanvasHeight(canvas.width)
+      canvas.width *= height / canvas.height
+      canvas.height = height
     }
   }
 }
 
+export function getDimensionLimit(): number {
+  return canvasDimensionLimit
+}
+
+const dimenstionLimitCache: { [width: number]: number } = {}
+
+export function getMaxCanvasHeight(width: number): number {
+  let val = dimenstionLimitCache[width]
+  if (val) return val
+  val = test()
+  dimenstionLimitCache[width] = val
+  return val
+
+  function test(): number {
+    const heights = [
+      // Chrome 83 (Mac, Win)
+      65535,
+      // Chrome 70 (Mac, Win)
+      // Chrome 68 (Android 4.4-9)
+      // Firefox 63 (Mac, Win)
+      32767,
+      // Edge 17 (Win)
+      // IE11 (Win)
+      // 16384,
+    ]
+    for (let i = 0; i < heights.length; i++) {
+      try {
+        const canvas = document.createElement('canvas')
+        canvas.width = width
+        canvas.height = heights[i]
+        const ctx = canvas.getContext('2d')!
+        ctx.drawImage(new Image(), 0, 0) // check
+        return heights[i]
+      } catch (e) {
+        // ignore
+      }
+    }
+    return canvasDimensionLimit
+  }
+}
+
 export function canvasToBlob(
   canvas: HTMLCanvasElement,
   options: Options = {},
@@ -210,7 +253,7 @@ export async function nodeToDataURL(
   const foreignObject = document.createElementNS(xmlns, 'foreignObject')
 
   // fix: if ratio=2 and style.border='1px', in html it is actually rendered to 1px, but in <img src="svg"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.
-  var ratio = getPixelRatio();
+  const ratio = getPixelRatio()
   svg.setAttribute('width', `${width / ratio}`)
   svg.setAttribute('height', `${height / ratio}`)
   svg.setAttribute('viewBox', `0 0 ${width} ${height}`)
@@ -252,21 +295,22 @@ export const isInstanceOfElement = <
 
 export function getStyles() {
   const styles = document.querySelectorAll('style,link[rel="stylesheet"]')
-  const ps: Array<Promise<string>> = []
+  const promises: Array<Promise<string>> = []
   toArray(styles).forEach((el) => {
     const e = el as Element
     if (e.tagName === 'LINK') {
       const href = e.getAttribute('href')
-      if (href) ps.push(getCssText(href).catch(() => ''))
+      if (href)
+        promises.push(
+          fetch(href)
+            .then((r) => r.text())
+            .catch(() => ''),
+        )
     } else {
-      ps.push(Promise.resolve(e.innerHTML))
+      promises.push(Promise.resolve(e.innerHTML))
     }
   })
-  return Promise.all(ps).then((arr) => {
+  return Promise.all(promises).then((arr) => {
     return arr.join('\n\n')
   })
-
-  function getCssText(url: string) {
-    return fetch(url).then((r) => r.text())
-  }
 }

From 56b099e5d794937dfa2c2e175cf0a9fb0c15a4a5 Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Sat, 17 Aug 2024 22:11:53 +0800
Subject: [PATCH 05/12] fix: img missing alt

---
 src/util.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util.ts b/src/util.ts
index 37ca7f20..f080fa6e 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -252,7 +252,7 @@ export async function nodeToDataURL(
   const svg = document.createElementNS(xmlns, 'svg')
   const foreignObject = document.createElementNS(xmlns, 'foreignObject')
 
-  // fix: if ratio=2 and style.border='1px', in html it is actually rendered to 1px, but in <img src="svg"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.
+  // fix: if ratio=2 and style.border='1px', in html it is actually rendered to 1px, but in <img src="svg" alt="i"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.
   const ratio = getPixelRatio()
   svg.setAttribute('width', `${width / ratio}`)
   svg.setAttribute('height', `${height / ratio}`)

From fc791067e615d531f442047a92ad26707c5b0b7e Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Tue, 10 Sep 2024 15:25:15 +0800
Subject: [PATCH 06/12] fix: url(...) in css file lose efficacy

---
 package.json |  2 +-
 src/index.ts | 20 +++++++++---------
 src/util.ts  | 59 +++++++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 1868843a..047488b9 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "svg"
   ],
   "scripts": {
-    "lint": "eslint 'src/**/*.{js,ts}?(x)' --fix",
+    "lint": "eslint src/**/*.{js,ts} --fix",
     "clean": "rimraf dist es lib",
     "build:esm": "tsc --module esnext --target es2017 --outDir ./es",
     "build:cjs": "tsc --module commonjs --target es5 --outDir ./lib",
diff --git a/src/index.ts b/src/index.ts
index c5b87ca8..323d6694 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,8 @@
 import { Options } from './types'
 import { cloneNode } from './clone-node'
-import { embedImages } from './embed-images'
+//import { embedImages } from './embed-images'
 import { applyStyle } from './apply-style'
-import { embedWebFonts, getWebFontCSS } from './embed-webfonts'
+//import { embedWebFonts, getWebFontCSS } from './embed-webfonts'
 import {
   getImageSize,
   getPixelRatio,
@@ -19,8 +19,8 @@ export async function toSvg<T extends HTMLElement>(
 ): Promise<string> {
   const { width, height } = getImageSize(node, options)
   const clonedNode = (await cloneNode(node, options, true)) as HTMLElement
-  await embedWebFonts(clonedNode, options)
-  await embedImages(clonedNode, options)
+  //await embedWebFonts(clonedNode, options)
+  //await embedImages(clonedNode, options)
   applyStyle(clonedNode, options)
   const datauri = await nodeToDataURL(clonedNode, width, height, options.usePageCss)
   return datauri
@@ -143,9 +143,9 @@ export async function toBlob<T extends HTMLElement>(
   return blob
 }
 
-export async function getFontEmbedCSS<T extends HTMLElement>(
-  node: T,
-  options: Options = {},
-): Promise<string> {
-  return getWebFontCSS(node, options)
-}
+// export async function getFontEmbedCSS<T extends HTMLElement>(
+//   node: T,
+//   options: Options = {},
+// ): Promise<string> {
+//   return getWebFontCSS(node, options)
+// }
diff --git a/src/util.ts b/src/util.ts
index f080fa6e..98bae887 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -240,6 +240,8 @@ export async function svgToDataURL(svg: SVGElement): Promise<string> {
     .then(() => new XMLSerializer().serializeToString(svg))
     .then(encodeURIComponent)
     .then((html) => `data:image/svg+xml;charset=utf-8,${html}`)
+  // @ts-ignore
+  //.then(s => $('body').prepend(svg) && s)
 }
 
 export async function nodeToDataURL(
@@ -275,9 +277,8 @@ export async function nodeToDataURL(
   return svgToDataURL(svg)
 }
 
-export const isInstanceOfElement = <
-  T extends typeof Element | typeof HTMLElement | typeof SVGImageElement,
->(
+export const isInstanceOfElement = <T extends typeof Element | typeof HTMLElement | typeof SVGImageElement,
+  >(
   node: Element | HTMLElement | SVGImageElement,
   instance: T,
 ): node is T['prototype'] => {
@@ -304,6 +305,7 @@ export function getStyles() {
         promises.push(
           fetch(href)
             .then((r) => r.text())
+            .then(tx => transRelPath(href, tx))
             .catch(() => ''),
         )
     } else {
@@ -314,3 +316,54 @@ export function getStyles() {
     return arr.join('\n\n')
   })
 }
+
+function transRelPath(cssPath: string, cssText: string): Promise<string> {
+  const quotReg = /^\s*(['"])(.+?)\1/
+  const map: { [url: string]: string } = {}
+  //css中的图片路径是相对于css文件的，要改为相对于当前html文件
+  let css = cssText.replace(/url\(\s*(.+?)\s*\)/ig, (m, path) => {
+    path = path.replace(quotReg, '$2')
+    const sUrl = toRelative(cssPath, path)
+    const ret = 'url(' + sUrl + ')'
+    map[sUrl] = ret
+    return ret
+  })
+  //css中的图片在svg中访问失败，需要转换为dataUrl
+  const promises = Object.keys(map).map(url => {
+    return urlToDataUrl(url).then(dataUrl => {
+      let p: number
+      while ((p = css.indexOf(map[url])) > -1) {
+        css = css.substring(0, p) + 'url(' + dataUrl + ')' + css.substring(p + map[url].length)
+      }
+    })
+  })
+  return Promise.all(promises).then(_ => css)
+}
+
+function toRelative(compareTo: string, path: string): string {
+  if (path[0] === '/' || path.match(/^data:|:\/\//i)) return path
+  const pos = compareTo.lastIndexOf('/')
+  if (pos > -1) {
+    const dir = compareTo.substring(0, pos)
+    const arr = (dir + '/' + path).split('/').filter(i => i !== '.')
+    for (let i = arr.length - 1; i > 0; i--) {
+      if (arr[i] === '..' && arr[i - 1] !== '..') {
+        arr.splice(i - 1, 2)
+        i--
+      }
+    }
+    return arr.join('/')
+  }
+  return path
+}
+
+function urlToDataUrl(url: string): Promise<string> {
+  return fetch(url)
+    .then(response => response.blob()) // 将响应转换为Blob
+    .then(blob => new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve('' + reader.result)
+      reader.onerror = error => resolve('')
+      reader.readAsDataURL(blob) // 转换Blob为DataURL
+    }))
+}

From 2ea87c3b98ac0fff260647b3522909b800135f3a Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Thu, 14 Nov 2024 16:09:06 +0800
Subject: [PATCH 07/12] Support image in html or image/font in <style>

---
 package.json |  6 ++---
 src/util.ts  | 74 +++++++++++++++++++++++++++++++++-------------------
 2 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 047488b9..9901851b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "html-to-image",
-  "version": "1.11.11",
-  "description": "Generates an image from a DOM node using HTML5 canvas and SVG.",
+  "name": "html-to-image-big",
+  "version": "1.11.12",
+  "description": "Generates an image from a DOM node using HTML5 canvas and SVG. Support big html page.",
   "main": "lib/index.js",
   "module": "es/index.js",
   "unpkg": "dist/html-to-image.js",
diff --git a/src/util.ts b/src/util.ts
index 98bae887..05ab9c15 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -237,11 +237,21 @@ export function createImage(url: string): Promise<HTMLImageElement> {
 
 export async function svgToDataURL(svg: SVGElement): Promise<string> {
   return Promise.resolve()
-    .then(() => new XMLSerializer().serializeToString(svg))
+    .then(async function () {
+      // svg中的图片地址无法离线下载，需要先转成dataUrl
+      const imgs = svg.querySelectorAll('img')
+      return Promise.all(
+        [].slice.call(imgs, 0).map((img: HTMLImageElement) => {
+          return urlToDataUrl(img.src).then((dataUrl) => (img.src = dataUrl))
+        }),
+      ).then(() => {
+        const xml = new XMLSerializer().serializeToString(svg)
+        // open('about:blank').document.write('<plaintext>' + xml); //for debug
+        return xml
+      })
+    })
     .then(encodeURIComponent)
     .then((html) => `data:image/svg+xml;charset=utf-8,${html}`)
-  // @ts-ignore
-  //.then(s => $('body').prepend(svg) && s)
 }
 
 export async function nodeToDataURL(
@@ -277,8 +287,9 @@ export async function nodeToDataURL(
   return svgToDataURL(svg)
 }
 
-export const isInstanceOfElement = <T extends typeof Element | typeof HTMLElement | typeof SVGImageElement,
-  >(
+export const isInstanceOfElement = <
+  T extends typeof Element | typeof HTMLElement | typeof SVGImageElement,
+>(
   node: Element | HTMLElement | SVGImageElement,
   instance: T,
 ): node is T['prototype'] => {
@@ -305,11 +316,13 @@ export function getStyles() {
         promises.push(
           fetch(href)
             .then((r) => r.text())
-            .then(tx => transRelPath(href, tx))
+            .then((tx) => transRelPath(href, tx))
             .catch(() => ''),
         )
     } else {
-      promises.push(Promise.resolve(e.innerHTML))
+      promises.push(
+        Promise.resolve(transRelPath(window.location.href, e.innerHTML)),
+      )
     }
   })
   return Promise.all(promises).then((arr) => {
@@ -320,36 +333,40 @@ export function getStyles() {
 function transRelPath(cssPath: string, cssText: string): Promise<string> {
   const quotReg = /^\s*(['"])(.+?)\1/
   const map: { [url: string]: string } = {}
-  //css中的图片路径是相对于css文件的，要改为相对于当前html文件
-  let css = cssText.replace(/url\(\s*(.+?)\s*\)/ig, (m, path) => {
-    path = path.replace(quotReg, '$2')
+  // css中的图片路径是相对于css文件的，要改为相对于当前html文件
+  let css = cssText.replace(/url\(\s*(.+?)\s*\)/gi, (m, path0) => {
+    if (path0.substring(0, 5) === 'data:') return m
+    const path = path0.replace(quotReg, '$2')
     const sUrl = toRelative(cssPath, path)
-    const ret = 'url(' + sUrl + ')'
+    const ret = `url(${sUrl})`
     map[sUrl] = ret
     return ret
   })
-  //css中的图片在svg中访问失败，需要转换为dataUrl
-  const promises = Object.keys(map).map(url => {
-    return urlToDataUrl(url).then(dataUrl => {
+  // css中的图片在svg中访问失败，需要转换为dataUrl
+  const promises = Object.keys(map).map((url) => {
+    return urlToDataUrl(url).then((dataUrl) => {
       let p: number
       while ((p = css.indexOf(map[url])) > -1) {
-        css = css.substring(0, p) + 'url(' + dataUrl + ')' + css.substring(p + map[url].length)
+        css = `${css.substring(0, p)}url(${dataUrl})${css.substring(
+          p + map[url].length,
+        )}`
       }
     })
   })
-  return Promise.all(promises).then(_ => css)
+  return Promise.all(promises).then(() => css)
 }
 
 function toRelative(compareTo: string, path: string): string {
   if (path[0] === '/' || path.match(/^data:|:\/\//i)) return path
-  const pos = compareTo.lastIndexOf('/')
+  const compareTo0 = compareTo.split('#')[0]
+  const pos = compareTo0.lastIndexOf('/')
   if (pos > -1) {
-    const dir = compareTo.substring(0, pos)
-    const arr = (dir + '/' + path).split('/').filter(i => i !== '.')
+    const dir = compareTo0.substring(0, pos)
+    const arr = `${dir}/${path}`.split('/').filter((i) => i !== '.')
     for (let i = arr.length - 1; i > 0; i--) {
       if (arr[i] === '..' && arr[i - 1] !== '..') {
         arr.splice(i - 1, 2)
-        i--
+        i -= 1
       }
     }
     return arr.join('/')
@@ -359,11 +376,14 @@ function toRelative(compareTo: string, path: string): string {
 
 function urlToDataUrl(url: string): Promise<string> {
   return fetch(url)
-    .then(response => response.blob()) // 将响应转换为Blob
-    .then(blob => new Promise((resolve, reject) => {
-      const reader = new FileReader()
-      reader.onload = () => resolve('' + reader.result)
-      reader.onerror = error => resolve('')
-      reader.readAsDataURL(blob) // 转换Blob为DataURL
-    }))
+    .then((response) => response.blob()) // 将响应转换为Blob
+    .then(
+      (blob) =>
+        new Promise((resolve) => {
+          const reader = new FileReader()
+          reader.onload = () => resolve(`${reader.result}`)
+          reader.onerror = () => resolve('')
+          reader.readAsDataURL(blob) // 转换Blob为DataURL
+        }),
+    )
 }

From 31a240040f0cc89e88786602aacb98b212bbd42d Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Fri, 15 Nov 2024 13:51:04 +0800
Subject: [PATCH 08/12] innerText

---
 src/util.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/util.ts b/src/util.ts
index 05ab9c15..093a94e7 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -56,13 +56,7 @@ export function delay<T>(ms: number) {
 }
 
 export function toArray<T>(arrayLike: any): T[] {
-  const arr: T[] = []
-
-  for (let i = 0, l = arrayLike.length; i < l; i++) {
-    arr.push(arrayLike[i])
-  }
-
-  return arr
+  return [].slice.call(arrayLike, 0)
 }
 
 function px(node: HTMLElement, styleProperty: string) {
@@ -321,7 +315,7 @@ export function getStyles() {
         )
     } else {
       promises.push(
-        Promise.resolve(transRelPath(window.location.href, e.innerHTML)),
+        Promise.resolve(transRelPath(window.location.href, (e as HTMLStyleElement).innerText)),
       )
     }
   })

From 93b584115c4c0a4b5a4102ee39c470470bb2d954 Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Fri, 15 Nov 2024 16:18:33 +0800
Subject: [PATCH 09/12] fix: html encode

---
 src/util.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/util.ts b/src/util.ts
index 093a94e7..4458aee9 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -274,7 +274,7 @@ export async function nodeToDataURL(
   foreignObject.appendChild(node)
   if (usePageCss) {
     const style = document.createElementNS(xmlns, 'style')
-    style.innerHTML = await getStyles()
+    style.insertAdjacentText('beforeend', await getStyles())
     svg.insertBefore(style, foreignObject)
   }
 
@@ -315,7 +315,9 @@ export function getStyles() {
         )
     } else {
       promises.push(
-        Promise.resolve(transRelPath(window.location.href, (e as HTMLStyleElement).innerText)),
+        Promise.resolve(
+          transRelPath(window.location.href, (e as HTMLStyleElement).innerText),
+        ),
       )
     }
   })
@@ -324,7 +326,8 @@ export function getStyles() {
   })
 }
 
-function transRelPath(cssPath: string, cssText: string): Promise<string> {
+function transRelPath(cssPath: string, cssTextIn: string): Promise<string> {
+  const cssText = cssTextIn.replace(/\/\*[\s\S]*?\*\//g, '')
   const quotReg = /^\s*(['"])(.+?)\1/
   const map: { [url: string]: string } = {}
   // css中的图片路径是相对于css文件的，要改为相对于当前html文件

From 4b37fe01d17561fe72283590c8c6c9d1e0d179c6 Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Fri, 15 Nov 2024 19:32:47 +0800
Subject: [PATCH 10/12] =?UTF-8?q?=E9=81=BF=E5=85=8D=E5=9B=BE=E5=83=8F?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E4=B8=8D=E5=AE=8C=E6=95=B4=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/embed-images.ts    |  96 ----------------
 src/embed-resources.ts |  92 ----------------
 src/embed-webfonts.ts  | 243 -----------------------------------------
 src/util.ts            |  91 ++++++++++++---
 4 files changed, 73 insertions(+), 449 deletions(-)
 delete mode 100644 src/embed-images.ts
 delete mode 100644 src/embed-resources.ts
 delete mode 100644 src/embed-webfonts.ts

diff --git a/src/embed-images.ts b/src/embed-images.ts
deleted file mode 100644
index aa552e8f..00000000
--- a/src/embed-images.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Options } from './types'
-import { embedResources } from './embed-resources'
-import { toArray, isInstanceOfElement } from './util'
-import { isDataUrl, resourceToDataURL } from './dataurl'
-import { getMimeType } from './mimes'
-
-async function embedProp(
-  propName: string,
-  node: HTMLElement,
-  options: Options,
-) {
-  const propValue = node.style?.getPropertyValue(propName)
-  if (propValue) {
-    const cssString = await embedResources(propValue, null, options)
-    node.style.setProperty(
-      propName,
-      cssString,
-      node.style.getPropertyPriority(propName),
-    )
-    return true
-  }
-  return false
-}
-
-async function embedBackground<T extends HTMLElement>(
-  clonedNode: T,
-  options: Options,
-) {
-  if (!(await embedProp('background', clonedNode, options))) {
-    await embedProp('background-image', clonedNode, options)
-  }
-  if (!(await embedProp('mask', clonedNode, options))) {
-    await embedProp('mask-image', clonedNode, options)
-  }
-}
-
-async function embedImageNode<T extends HTMLElement | SVGImageElement>(
-  clonedNode: T,
-  options: Options,
-) {
-  const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement)
-
-  if (
-    !(isImageElement && !isDataUrl(clonedNode.src)) &&
-    !(
-      isInstanceOfElement(clonedNode, SVGImageElement) &&
-      !isDataUrl(clonedNode.href.baseVal)
-    )
-  ) {
-    return
-  }
-
-  const url = isImageElement ? clonedNode.src : clonedNode.href.baseVal
-
-  const dataURL = await resourceToDataURL(url, getMimeType(url), options)
-  await new Promise((resolve, reject) => {
-    clonedNode.onload = resolve
-    clonedNode.onerror = reject
-
-    const image = clonedNode as HTMLImageElement
-    if (image.decode) {
-      image.decode = resolve as any
-    }
-
-    if (image.loading === 'lazy') {
-      image.loading = 'eager'
-    }
-
-    if (isImageElement) {
-      clonedNode.srcset = ''
-      clonedNode.src = dataURL
-    } else {
-      clonedNode.href.baseVal = dataURL
-    }
-  })
-}
-
-async function embedChildren<T extends HTMLElement>(
-  clonedNode: T,
-  options: Options,
-) {
-  const children = toArray<HTMLElement>(clonedNode.childNodes)
-  const deferreds = children.map((child) => embedImages(child, options))
-  await Promise.all(deferreds).then(() => clonedNode)
-}
-
-export async function embedImages<T extends HTMLElement>(
-  clonedNode: T,
-  options: Options,
-) {
-  if (isInstanceOfElement(clonedNode, Element)) {
-    await embedBackground(clonedNode, options)
-    await embedImageNode(clonedNode, options)
-    await embedChildren(clonedNode, options)
-  }
-}
diff --git a/src/embed-resources.ts b/src/embed-resources.ts
deleted file mode 100644
index bed8b373..00000000
--- a/src/embed-resources.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Options } from './types'
-import { resolveUrl } from './util'
-import { getMimeType } from './mimes'
-import { isDataUrl, makeDataUrl, resourceToDataURL } from './dataurl'
-
-const URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g
-const URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g
-const FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g
-
-function toRegex(url: string): RegExp {
-  // eslint-disable-next-line no-useless-escape
-  const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1')
-  return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, 'g')
-}
-
-export function parseURLs(cssText: string): string[] {
-  const urls: string[] = []
-
-  cssText.replace(URL_REGEX, (raw, quotation, url) => {
-    urls.push(url)
-    return raw
-  })
-
-  return urls.filter((url) => !isDataUrl(url))
-}
-
-export async function embed(
-  cssText: string,
-  resourceURL: string,
-  baseURL: string | null,
-  options: Options,
-  getContentFromUrl?: (url: string) => Promise<string>,
-): Promise<string> {
-  try {
-    const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL
-    const contentType = getMimeType(resourceURL)
-    let dataURL: string
-    if (getContentFromUrl) {
-      const content = await getContentFromUrl(resolvedURL)
-      dataURL = makeDataUrl(content, contentType)
-    } else {
-      dataURL = await resourceToDataURL(resolvedURL, contentType, options)
-    }
-    return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`)
-  } catch (error) {
-    // pass
-  }
-  return cssText
-}
-
-function filterPreferredFontFormat(
-  str: string,
-  { preferredFontFormat }: Options,
-): string {
-  return !preferredFontFormat
-    ? str
-    : str.replace(FONT_SRC_REGEX, (match: string) => {
-        // eslint-disable-next-line no-constant-condition
-        while (true) {
-          const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match) || []
-          if (!format) {
-            return ''
-          }
-
-          if (format === preferredFontFormat) {
-            return `src: ${src};`
-          }
-        }
-      })
-}
-
-export function shouldEmbed(url: string): boolean {
-  return url.search(URL_REGEX) !== -1
-}
-
-export async function embedResources(
-  cssText: string,
-  baseUrl: string | null,
-  options: Options,
-): Promise<string> {
-  if (!shouldEmbed(cssText)) {
-    return cssText
-  }
-
-  const filteredCSSText = filterPreferredFontFormat(cssText, options)
-  const urls = parseURLs(filteredCSSText)
-  return urls.reduce(
-    (deferred, url) =>
-      deferred.then((css) => embed(css, url, baseUrl, options)),
-    Promise.resolve(filteredCSSText),
-  )
-}
diff --git a/src/embed-webfonts.ts b/src/embed-webfonts.ts
deleted file mode 100644
index 42c73da6..00000000
--- a/src/embed-webfonts.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-import type { Options } from './types'
-import { toArray } from './util'
-import { fetchAsDataURL } from './dataurl'
-import { shouldEmbed, embedResources } from './embed-resources'
-
-interface Metadata {
-  url: string
-  cssText: string
-}
-
-const cssFetchCache: { [href: string]: Metadata } = {}
-
-async function fetchCSS(url: string) {
-  let cache = cssFetchCache[url]
-  if (cache != null) {
-    return cache
-  }
-
-  const res = await fetch(url)
-  const cssText = await res.text()
-  cache = { url, cssText }
-
-  cssFetchCache[url] = cache
-
-  return cache
-}
-
-async function embedFonts(data: Metadata, options: Options): Promise<string> {
-  let cssText = data.cssText
-  const regexUrl = /url\(["']?([^"')]+)["']?\)/g
-  const fontLocs = cssText.match(/url\([^)]+\)/g) || []
-  const loadFonts = fontLocs.map(async (loc: string) => {
-    let url = loc.replace(regexUrl, '$1')
-    if (!url.startsWith('https://')) {
-      url = new URL(url, data.url).href
-    }
-
-    return fetchAsDataURL<[string, string]>(
-      url,
-      options.fetchRequestInit,
-      ({ result }) => {
-        cssText = cssText.replace(loc, `url(${result})`)
-        return [loc, result]
-      },
-    )
-  })
-
-  return Promise.all(loadFonts).then(() => cssText)
-}
-
-function parseCSS(source: string) {
-  if (source == null) {
-    return []
-  }
-
-  const result: string[] = []
-  const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi
-  // strip out comments
-  let cssText = source.replace(commentsRegex, '')
-
-  // eslint-disable-next-line prefer-regex-literals
-  const keyframesRegex = new RegExp(
-    '((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})',
-    'gi',
-  )
-
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    const matches = keyframesRegex.exec(cssText)
-    if (matches === null) {
-      break
-    }
-    result.push(matches[0])
-  }
-  cssText = cssText.replace(keyframesRegex, '')
-
-  const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi
-  // to match css & media queries together
-  const combinedCSSRegex =
-    '((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]' +
-    '*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})'
-  // unified regex
-  const unifiedRegex = new RegExp(combinedCSSRegex, 'gi')
-
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    let matches = importRegex.exec(cssText)
-    if (matches === null) {
-      matches = unifiedRegex.exec(cssText)
-      if (matches === null) {
-        break
-      } else {
-        importRegex.lastIndex = unifiedRegex.lastIndex
-      }
-    } else {
-      unifiedRegex.lastIndex = importRegex.lastIndex
-    }
-    result.push(matches[0])
-  }
-
-  return result
-}
-
-async function getCSSRules(
-  styleSheets: CSSStyleSheet[],
-  options: Options,
-): Promise<CSSStyleRule[]> {
-  const ret: CSSStyleRule[] = []
-  const deferreds: Promise<number | void>[] = []
-
-  // First loop inlines imports
-  styleSheets.forEach((sheet) => {
-    if ('cssRules' in sheet) {
-      try {
-        toArray<CSSRule>(sheet.cssRules || []).forEach((item, index) => {
-          if (item.type === CSSRule.IMPORT_RULE) {
-            let importIndex = index + 1
-            const url = (item as CSSImportRule).href
-            const deferred = fetchCSS(url)
-              .then((metadata) => embedFonts(metadata, options))
-              .then((cssText) =>
-                parseCSS(cssText).forEach((rule) => {
-                  try {
-                    sheet.insertRule(
-                      rule,
-                      rule.startsWith('@import')
-                        ? (importIndex += 1)
-                        : sheet.cssRules.length,
-                    )
-                  } catch (error) {
-                    console.error('Error inserting rule from remote css', {
-                      rule,
-                      error,
-                    })
-                  }
-                }),
-              )
-              .catch((e) => {
-                console.error('Error loading remote css', e.toString())
-              })
-
-            deferreds.push(deferred)
-          }
-        })
-      } catch (e) {
-        const inline =
-          styleSheets.find((a) => a.href == null) || document.styleSheets[0]
-        if (sheet.href != null) {
-          deferreds.push(
-            fetchCSS(sheet.href)
-              .then((metadata) => embedFonts(metadata, options))
-              .then((cssText) =>
-                parseCSS(cssText).forEach((rule) => {
-                  inline.insertRule(rule, sheet.cssRules.length)
-                }),
-              )
-              .catch((err: unknown) => {
-                console.error('Error loading remote stylesheet', err)
-              }),
-          )
-        }
-        console.error('Error inlining remote css file', e)
-      }
-    }
-  })
-
-  return Promise.all(deferreds).then(() => {
-    // Second loop parses rules
-    styleSheets.forEach((sheet) => {
-      if ('cssRules' in sheet) {
-        try {
-          toArray<CSSStyleRule>(sheet.cssRules || []).forEach((item) => {
-            ret.push(item)
-          })
-        } catch (e) {
-          console.error(`Error while reading CSS rules from ${sheet.href}`, e)
-        }
-      }
-    })
-
-    return ret
-  })
-}
-
-function getWebFontRules(cssRules: CSSStyleRule[]): CSSStyleRule[] {
-  return cssRules
-    .filter((rule) => rule.type === CSSRule.FONT_FACE_RULE)
-    .filter((rule) => shouldEmbed(rule.style.getPropertyValue('src')))
-}
-
-async function parseWebFontRules<T extends HTMLElement>(
-  node: T,
-  options: Options,
-) {
-  if (node.ownerDocument == null) {
-    throw new Error('Provided element is not within a Document')
-  }
-
-  const styleSheets = toArray<CSSStyleSheet>(node.ownerDocument.styleSheets)
-  const cssRules = await getCSSRules(styleSheets, options)
-
-  return getWebFontRules(cssRules)
-}
-
-export async function getWebFontCSS<T extends HTMLElement>(
-  node: T,
-  options: Options,
-): Promise<string> {
-  const rules = await parseWebFontRules(node, options)
-  const cssTexts = await Promise.all(
-    rules.map((rule) => {
-      const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null
-      return embedResources(rule.cssText, baseUrl, options)
-    }),
-  )
-
-  return cssTexts.join('\n')
-}
-
-export async function embedWebFonts<T extends HTMLElement>(
-  clonedNode: T,
-  options: Options,
-) {
-  const cssText =
-    options.fontEmbedCSS != null
-      ? options.fontEmbedCSS
-      : options.skipFonts
-      ? null
-      : await getWebFontCSS(clonedNode, options)
-
-  if (cssText) {
-    const styleNode = document.createElement('style')
-    const sytleContent = document.createTextNode(cssText)
-
-    styleNode.appendChild(sytleContent)
-
-    if (clonedNode.firstChild) {
-      clonedNode.insertBefore(styleNode, clonedNode.firstChild)
-    } else {
-      clonedNode.appendChild(styleNode)
-    }
-  }
-}
diff --git a/src/util.ts b/src/util.ts
index 4458aee9..1ce5c84a 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -165,10 +165,7 @@ export function getMaxCanvasHeight(width: number): number {
     ]
     for (let i = 0; i < heights.length; i++) {
       try {
-        const canvas = document.createElement('canvas')
-        canvas.width = width
-        canvas.height = heights[i]
-        const ctx = canvas.getContext('2d')!
+        const ctx = get2dCtx(width, heights[i])
         ctx.drawImage(new Image(), 0, 0) // check
         return heights[i]
       } catch (e) {
@@ -179,6 +176,13 @@ export function getMaxCanvasHeight(width: number): number {
   }
 }
 
+function get2dCtx(width: number, height: number) {
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  return canvas.getContext('2d')!
+}
+
 export function canvasToBlob(
   canvas: HTMLCanvasElement,
   options: Options = {},
@@ -217,21 +221,66 @@ export function canvasToBlob(
   })
 }
 
-export function createImage(url: string): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const img = new Image()
-    img.decode = () => resolve(img) as any
-    img.onload = () => resolve(img)
-    img.onerror = reject
-    img.crossOrigin = 'anonymous'
-    img.decoding = 'async'
-    img.src = url
-  })
+export function createImage(urlIn: string) {
+  //var win = open('about:blank');
+  return checkImg(1)
+  //svg中css的解释逻辑与html中不完全相同，会导致svg中的高度高于实际html的高度。
+  //原因诸如：4k屏的1px在html中为0.51px，而在svg中为1px；又如 overflow-y 在svg中失效；background定位不兼容等。
+  //为了避免图像底部不完整的情况，这里每次额外增加60px高度，并寻找是否存在底部标志颜色（BCheckColor），直到已存在，说明已经到达底部。
+  function checkImg(i: number): Promise<HTMLImageElement> {
+    var url = replaceHeight(urlIn, BCheckHeight * i)
+    return urlToImg(url).then(function(img: HTMLImageElement): Promise<HTMLImageElement> | HTMLImageElement {
+      var ctx = get2dCtx(1, BCheckHeight)
+      ctx.drawImage(img, Math.floor(img.width / 2), img.height - BCheckHeight, 1, BCheckHeight, 0, 0, 1, BCheckHeight)
+      //win.document.write(i + '<img src="' + ctx.canvas.toDataURL() + '" style="width:10px" />'); //debug
+      var dat = ctx.getImageData(0, 0, 1, BCheckHeight).data
+      let color = padx(dat[dat.length - 4]) + padx(dat[dat.length - 3]) + padx(dat[dat.length - 2])
+      if (color !== BCheckColor && i < 50) {
+        return checkImg(i + 1)
+      }
+      //每4个字节为1像素，共4字节，rgba
+      for (let j = dat.length - 8; j >= 0; j -= 4) {
+        color = padx(dat[j]) + padx(dat[j + 1]) + padx(dat[j + 2])
+        if (color !== BCheckColor) {
+          url = replaceHeight(urlIn, BCheckHeight * (i - 1) + (j / 4) / getPixelRatio());
+          return urlToImg(url)
+        }
+      }
+      return img
+    })
+  }
+
+  function urlToImg(url: string): Promise<HTMLImageElement> {
+    return new Promise(function(resolve, reject) {
+      var img = new Image()
+      img.decode = function() {
+        return resolve(img)
+      } as any
+      img.onload = function() {
+        return resolve(img)
+      }
+      img.onerror = reject
+      img.crossOrigin = 'anonymous'
+      img.decoding = 'async'
+      img.src = url
+    })
+  }
+
+  function replaceHeight(url: string, delta: number) {
+    return url.replace(/(viewBox%3D%220%200%20[\d.]+%20)([\d.]+)%22/, function(_, m1, m2) {
+      return m1 + (parseInt(m2) + delta) + '%22'
+    })
+  }
+
+  function padx(i: number) {
+    var r = i.toString(16)
+    return r.length === 1 ? '0' + r : r
+  }
 }
 
 export async function svgToDataURL(svg: SVGElement): Promise<string> {
   return Promise.resolve()
-    .then(async function () {
+    .then(async function() {
       // svg中的图片地址无法离线下载，需要先转成dataUrl
       const imgs = svg.querySelectorAll('img')
       return Promise.all(
@@ -248,6 +297,9 @@ export async function svgToDataURL(svg: SVGElement): Promise<string> {
     .then((html) => `data:image/svg+xml;charset=utf-8,${html}`)
 }
 
+const BCheckColor = '010201'
+const BCheckHeight = 60
+
 export async function nodeToDataURL(
   node: HTMLElement,
   width: number,
@@ -272,6 +324,10 @@ export async function nodeToDataURL(
 
   svg.appendChild(foreignObject)
   foreignObject.appendChild(node)
+  foreignObject.insertAdjacentHTML(
+    'beforeend',
+    `<div style="background: #${BCheckColor};height:${BCheckHeight * 2}px"></div>`,
+  )
   if (usePageCss) {
     const style = document.createElementNS(xmlns, 'style')
     style.insertAdjacentText('beforeend', await getStyles())
@@ -281,9 +337,8 @@ export async function nodeToDataURL(
   return svgToDataURL(svg)
 }
 
-export const isInstanceOfElement = <
-  T extends typeof Element | typeof HTMLElement | typeof SVGImageElement,
->(
+export const isInstanceOfElement = <T extends typeof Element | typeof HTMLElement | typeof SVGImageElement,
+  >(
   node: Element | HTMLElement | SVGImageElement,
   instance: T,
 ): node is T['prototype'] => {

From a538140e7979a3b9f6370f4faa2489ce78c5e269 Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Mon, 18 Nov 2024 18:20:22 +0800
Subject: [PATCH 11/12] fix: add `checkTail` to whether the svg tail is
 integrated. This will fix some problems that the last page of exported pdf is
 truncated.

---
 src/clone-node.ts |   6 +-
 src/index.ts      |  23 +++++---
 src/types.ts      |   7 ++-
 src/util.ts       | 141 ++++++++++++++++++++++++++++------------------
 4 files changed, 112 insertions(+), 65 deletions(-)

diff --git a/src/clone-node.ts b/src/clone-node.ts
index 683f7f30..60c27883 100644
--- a/src/clone-node.ts
+++ b/src/clone-node.ts
@@ -170,7 +170,11 @@ function cloneSelectValue<T extends HTMLElement>(nativeNode: T, clonedNode: T) {
   }
 }
 
-function decorate<T extends HTMLElement>(nativeNode: T, clonedNode: T, usePageCss?: boolean): T {
+function decorate<T extends HTMLElement>(
+  nativeNode: T,
+  clonedNode: T,
+  usePageCss?: boolean,
+): T {
   if (isInstanceOfElement(clonedNode, Element)) {
     if (!usePageCss) cloneCSSStyle(nativeNode, clonedNode)
     if (!usePageCss) clonePseudoElements(nativeNode, clonedNode)
diff --git a/src/index.ts b/src/index.ts
index 323d6694..372ee105 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,16 +1,16 @@
 import { Options } from './types'
 import { cloneNode } from './clone-node'
-//import { embedImages } from './embed-images'
+// import { embedImages } from './embed-images'
 import { applyStyle } from './apply-style'
-//import { embedWebFonts, getWebFontCSS } from './embed-webfonts'
+// import { embedWebFonts, getWebFontCSS } from './embed-webfonts'
 import {
   getImageSize,
   getPixelRatio,
-  createImage,
   canvasToBlob,
   nodeToDataURL,
   checkCanvasDimensions,
   getDimensionLimit,
+  svgUrlToImg,
 } from './util'
 
 export async function toSvg<T extends HTMLElement>(
@@ -19,10 +19,15 @@ export async function toSvg<T extends HTMLElement>(
 ): Promise<string> {
   const { width, height } = getImageSize(node, options)
   const clonedNode = (await cloneNode(node, options, true)) as HTMLElement
-  //await embedWebFonts(clonedNode, options)
-  //await embedImages(clonedNode, options)
+  // await embedWebFonts(clonedNode, options)
+  // await embedImages(clonedNode, options)
   applyStyle(clonedNode, options)
-  const datauri = await nodeToDataURL(clonedNode, width, height, options.usePageCss)
+  const datauri = await nodeToDataURL(
+    clonedNode,
+    width,
+    height,
+    options,
+  )
   return datauri
 }
 
@@ -31,7 +36,7 @@ export async function toImage<T extends HTMLElement>(
   options: Options = {},
 ): Promise<HTMLImageElement> {
   const svg = await toSvg(node, options)
-  return createImage(svg)
+  return svgUrlToImg(svg, options)
 }
 
 export async function toCanvas<T extends HTMLElement>(
@@ -39,7 +44,7 @@ export async function toCanvas<T extends HTMLElement>(
   options: Options = {},
 ): Promise<HTMLCanvasElement> {
   const img = await toImage(node, options)
-  const { width, height } = getImageSize(node, options)
+  const { width, height } = getImageSize(node, options, img)
   const canvas = document.createElement('canvas')
   const context = canvas.getContext('2d')!
   const ratio = options.pixelRatio || getPixelRatio()
@@ -70,7 +75,7 @@ export async function toCanvasList<T extends HTMLElement>(
   options: Options = {},
 ): Promise<Array<HTMLCanvasElement>> {
   const img = await toImage(node, options)
-  const { width, height } = getImageSize(node, options)
+  const { width, height } = getImageSize(node, options, img)
   const ratio = options.pixelRatio || getPixelRatio()
   let canvasWidth = (options.canvasWidth || width) * ratio
   let canvasHeight = (options.canvasHeight || height) * ratio
diff --git a/src/types.ts b/src/types.ts
index d5616f42..2b4c20fd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -95,5 +95,10 @@ export interface Options {
    * Use a <style> in svg to import all styles of current html page, and do not add computed styles to every node any more.
    * This will make the svg content very small, to resolve problems when html has large amount of sub nodes.
    * */
-  usePageCss?: boolean
+  usePageCss?: boolean,
+  /*
+   * Check whether the svg tail is integrated.
+   * This will fix some problems that the last page of exported pdf is truncated.
+   * */
+  checkTail?: boolean
 }
diff --git a/src/util.ts b/src/util.ts
index 1ce5c84a..3ed7812d 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -77,9 +77,15 @@ function getNodeHeight(node: HTMLElement) {
   return node.clientHeight + topBorder + bottomBorder
 }
 
-export function getImageSize(targetNode: HTMLElement, options: Options = {}) {
+export function getImageSize(
+  targetNode: HTMLElement,
+  options: Options = {},
+  svgImg: HTMLImageElement | undefined = undefined,
+) {
   const width = options.width || getNodeWidth(targetNode)
-  const height = options.height || getNodeHeight(targetNode)
+  const height =
+    options.height ||
+    (svgImg ? svgImg.height * getPixelRatio() : getNodeHeight(targetNode))
 
   return { width, height }
 }
@@ -221,63 +227,87 @@ export function canvasToBlob(
   })
 }
 
-export function createImage(urlIn: string) {
-  //var win = open('about:blank');
-  return checkImg(1)
-  //svg中css的解释逻辑与html中不完全相同，会导致svg中的高度高于实际html的高度。
-  //原因诸如：4k屏的1px在html中为0.51px，而在svg中为1px；又如 overflow-y 在svg中失效；background定位不兼容等。
-  //为了避免图像底部不完整的情况，这里每次额外增加60px高度，并寻找是否存在底部标志颜色（BCheckColor），直到已存在，说明已经到达底部。
+export function svgUrlToImg(urlIn: string, opt: Options = {}) {
+  if (!opt.checkTail) return createImage(urlIn)
+  const deviceRatio = getPixelRatio()
+  // var win = open('about:blank');
+  return checkImg(0)
+  // svg中css的解释逻辑与html中不完全相同，会导致svg中的高度高于实际html的高度。
+  // 原因诸如：4k屏的1px在html中为0.51px，而在svg中为1px；又如 overflow-y 在svg中失效；background定位不兼容等。
+  // 为了避免图像底部不完整的情况，这里每次额外增加60px高度，并寻找是否存在底部标志颜色（TailColor），直到已存在，说明已经到达底部。
   function checkImg(i: number): Promise<HTMLImageElement> {
-    var url = replaceHeight(urlIn, BCheckHeight * i)
-    return urlToImg(url).then(function(img: HTMLImageElement): Promise<HTMLImageElement> | HTMLImageElement {
-      var ctx = get2dCtx(1, BCheckHeight)
-      ctx.drawImage(img, Math.floor(img.width / 2), img.height - BCheckHeight, 1, BCheckHeight, 0, 0, 1, BCheckHeight)
-      //win.document.write(i + '<img src="' + ctx.canvas.toDataURL() + '" style="width:10px" />'); //debug
-      var dat = ctx.getImageData(0, 0, 1, BCheckHeight).data
-      let color = padx(dat[dat.length - 4]) + padx(dat[dat.length - 3]) + padx(dat[dat.length - 2])
-      if (color !== BCheckColor && i < 50) {
+    let url = replaceHeight(urlIn, TailHeight * i)
+    return createImage(url).then(function(img) {
+      const prePx = 3
+      const canvasHeight = (TailHeight * 2) / deviceRatio + prePx
+      const ctx = get2dCtx(1, canvasHeight)
+      // 截取底部1px宽，2倍TailColor多一点图像
+      ctx.drawImage(
+        img,
+        Math.floor(img.width / 2),
+        img.height - canvasHeight,
+        1,
+        canvasHeight,
+        0,
+        0,
+        1,
+        canvasHeight,
+      )
+      // win.document.write(i + '<img src="' + ctx.canvas.toDataURL() + '" style="width:10px" />'); //debug
+      const dat = ctx.getImageData(0, 0, 1, canvasHeight).data
+      let color =
+        padx(dat[dat.length - 4]) +
+        padx(dat[dat.length - 3]) +
+        padx(dat[dat.length - 2])
+      // 最底部一条线的颜色不是TailColor时，还没有到达原图底部
+      if (color !== TailColor && i < 50) {
         return checkImg(i + 1)
       }
-      //每4个字节为1像素，共4字节，rgba
+      // 已经到达底部，去掉多余的TailColor部分。每4个字节为1像素，共4字节，rgba
       for (let j = dat.length - 8; j >= 0; j -= 4) {
         color = padx(dat[j]) + padx(dat[j + 1]) + padx(dat[j + 2])
-        if (color !== BCheckColor) {
-          url = replaceHeight(urlIn, BCheckHeight * (i - 1) + (j / 4) / getPixelRatio());
-          return urlToImg(url)
+        if (color !== TailColor) {
+          // 分界点位置
+          const posY = -(canvasHeight - j / 4) * deviceRatio
+          var url1 = replaceHeight(url, posY)
+          return createImage(url1)
         }
       }
       return img
     })
   }
 
-  function urlToImg(url: string): Promise<HTMLImageElement> {
-    return new Promise(function(resolve, reject) {
-      var img = new Image()
-      img.decode = function() {
-        return resolve(img)
-      } as any
-      img.onload = function() {
-        return resolve(img)
-      }
-      img.onerror = reject
-      img.crossOrigin = 'anonymous'
-      img.decoding = 'async'
-      img.src = url
-    })
-  }
-
   function replaceHeight(url: string, delta: number) {
-    return url.replace(/(viewBox%3D%220%200%20[\d.]+%20)([\d.]+)%22/, function(_, m1, m2) {
-      return m1 + (parseInt(m2) + delta) + '%22'
-    })
+    return url
+      .replace(
+        /(viewBox%3D%220%200%20[\d.]+%20)([\d.]+)%22/,
+        function(_, m1, vpHeight) {
+          return `${m1 + (+vpHeight + delta)}%22`
+        },
+      )
+      .replace(/(%20height%3D%22)([\d.]+)%22/, function(_, m1, height) {
+        return `${m1 + (+height + delta / deviceRatio)}%22`
+      })
   }
 
-  function padx(i: number) {
-    var r = i.toString(16)
-    return r.length === 1 ? '0' + r : r
+  function padx(i: number): string {
+    const r = i.toString(16)
+    return r.length === 1 ? `0${r}` : r
   }
 }
 
+export function createImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.decode = () => resolve(img) as any
+    img.onload = () => resolve(img)
+    img.onerror = reject
+    img.crossOrigin = 'anonymous'
+    img.decoding = 'async'
+    img.src = url
+  })
+}
+
 export async function svgToDataURL(svg: SVGElement): Promise<string> {
   return Promise.resolve()
     .then(async function() {
@@ -297,24 +327,25 @@ export async function svgToDataURL(svg: SVGElement): Promise<string> {
     .then((html) => `data:image/svg+xml;charset=utf-8,${html}`)
 }
 
-const BCheckColor = '010201'
-const BCheckHeight = 60
+const TailColor = 'fefffd'
+const TailHeight = 60
 
 export async function nodeToDataURL(
   node: HTMLElement,
   width: number,
   height: number,
-  usePageCss?: boolean,
+  opt: Options = {},
 ): Promise<string> {
   const xmlns = 'http://www.w3.org/2000/svg'
   const svg = document.createElementNS(xmlns, 'svg')
   const foreignObject = document.createElementNS(xmlns, 'foreignObject')
-
+  // add a tail for check ending
+  const heightWithTail = height + TailHeight * 2
   // fix: if ratio=2 and style.border='1px', in html it is actually rendered to 1px, but in <img src="svg" alt="i"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.
   const ratio = getPixelRatio()
   svg.setAttribute('width', `${width / ratio}`)
-  svg.setAttribute('height', `${height / ratio}`)
-  svg.setAttribute('viewBox', `0 0 ${width} ${height}`)
+  svg.setAttribute('height', `${heightWithTail / ratio}`)
+  svg.setAttribute('viewBox', `0 0 ${width} ${heightWithTail}`)
 
   foreignObject.setAttribute('width', '100%')
   foreignObject.setAttribute('height', '100%')
@@ -324,11 +355,13 @@ export async function nodeToDataURL(
 
   svg.appendChild(foreignObject)
   foreignObject.appendChild(node)
-  foreignObject.insertAdjacentHTML(
-    'beforeend',
-    `<div style="background: #${BCheckColor};height:${BCheckHeight * 2}px"></div>`,
-  )
-  if (usePageCss) {
+  if (opt.checkTail) {
+    foreignObject.insertAdjacentHTML(
+      'beforeend',
+      `<div style="background: #${TailColor};height:${TailHeight * 2}px"></div>`,
+    )
+  }
+  if (opt.usePageCss) {
     const style = document.createElementNS(xmlns, 'style')
     style.insertAdjacentText('beforeend', await getStyles())
     svg.insertBefore(style, foreignObject)
@@ -387,7 +420,7 @@ function transRelPath(cssPath: string, cssTextIn: string): Promise<string> {
   const map: { [url: string]: string } = {}
   // css中的图片路径是相对于css文件的，要改为相对于当前html文件
   let css = cssText.replace(/url\(\s*(.+?)\s*\)/gi, (m, path0) => {
-    if (path0.substring(0, 5) === 'data:') return m
+    if (path0.match(/^['"\s]?data:/)) return m
     const path = path0.replace(quotReg, '$2')
     const sUrl = toRelative(cssPath, path)
     const ret = `url(${sUrl})`

From 7cba19650448b87c9c40b7124c5de15ee3272911 Mon Sep 17 00:00:00 2001
From: hzsrc <hz8889999>
Date: Mon, 18 Nov 2024 18:25:30 +0800
Subject: [PATCH 12/12] alt

---
 src/util.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util.ts b/src/util.ts
index 3ed7812d..380d064a 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -253,7 +253,7 @@ export function svgUrlToImg(urlIn: string, opt: Options = {}) {
         1,
         canvasHeight,
       )
-      // win.document.write(i + '<img src="' + ctx.canvas.toDataURL() + '" style="width:10px" />'); //debug
+      // win.document.write(i + '<img src="' + ctx.canvas.toDataURL() + '" style="width:10px" alt="img"/>'); //debug
       const dat = ctx.getImageData(0, 0, 1, canvasHeight).data
       let color =
         padx(dat[dat.length - 4]) +