diff --git a/README.md b/README.md
index 782d2525..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:
 
@@ -292,6 +315,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/package.json b/package.json
index 1868843a..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",
@@ -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/clone-node.ts b/src/clone-node.ts
index 500ce332..60c27883 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,14 @@ 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 +244,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/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/index.ts b/src/index.ts
index 2de59a30..372ee105 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,15 +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>(
@@ -18,21 +19,32 @@ 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)
+  const datauri = await nodeToDataURL(
+    clonedNode,
+    width,
+    height,
+    options,
+  )
   return datauri
 }
 
-export async function toCanvas<T extends HTMLElement>(
+export async function toImage<T extends HTMLElement>(
   node: T,
   options: Options = {},
-): Promise<HTMLCanvasElement> {
-  const { width, height } = getImageSize(node, options)
+): Promise<HTMLImageElement> {
   const svg = await toSvg(node, options)
-  const img = await createImage(svg)
+  return svgUrlToImg(svg, options)
+}
 
+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, img)
   const canvas = document.createElement('canvas')
   const context = canvas.getContext('2d')!
   const ratio = options.pixelRatio || getPixelRatio()
@@ -58,6 +70,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, img)
+  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 = {},
@@ -93,9 +148,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/types.ts b/src/types.ts
index b511363f..2b4c20fd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -91,4 +91,14 @@ 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,
+  /*
+   * 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 d418b621..380d064a 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) {
@@ -83,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 }
 }
@@ -129,19 +129,66 @@ 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 ctx = get2dCtx(width, heights[i])
+        ctx.drawImage(new Image(), 0, 0) // check
+        return heights[i]
+      } catch (e) {
+        // ignore
+      }
     }
+    return canvasDimensionLimit
   }
 }
 
+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 = {},
@@ -180,6 +227,75 @@ export function canvasToBlob(
   })
 }
 
+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> {
+    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" alt="img"/>'); //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)
+      }
+      // 已经到达底部，去掉多余的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 !== TailColor) {
+          // 分界点位置
+          const posY = -(canvasHeight - j / 4) * deviceRatio
+          var url1 = replaceHeight(url, posY)
+          return createImage(url1)
+        }
+      }
+      return img
+    })
+  }
+
+  function replaceHeight(url: string, delta: number) {
+    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): 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()
@@ -194,23 +310,42 @@ 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}`)
 }
 
+const TailColor = 'fefffd'
+const TailHeight = 60
+
 export async function nodeToDataURL(
   node: HTMLElement,
   width: number,
   height: number,
+  opt: Options = {},
 ): Promise<string> {
   const xmlns = 'http://www.w3.org/2000/svg'
   const svg = document.createElementNS(xmlns, 'svg')
   const foreignObject = document.createElementNS(xmlns, 'foreignObject')
-
-  svg.setAttribute('width', `${width}`)
-  svg.setAttribute('height', `${height}`)
-  svg.setAttribute('viewBox', `0 0 ${width} ${height}`)
+  // 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', `${heightWithTail / ratio}`)
+  svg.setAttribute('viewBox', `0 0 ${width} ${heightWithTail}`)
 
   foreignObject.setAttribute('width', '100%')
   foreignObject.setAttribute('height', '100%')
@@ -220,12 +355,23 @@ export async function nodeToDataURL(
 
   svg.appendChild(foreignObject)
   foreignObject.appendChild(node)
+  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)
+  }
+
   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'] => {
@@ -240,3 +386,89 @@ export const isInstanceOfElement = <
     isInstanceOfElement(nodePrototype, instance)
   )
 }
+
+export function getStyles() {
+  const styles = document.querySelectorAll('style,link[rel="stylesheet"]')
+  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)
+        promises.push(
+          fetch(href)
+            .then((r) => r.text())
+            .then((tx) => transRelPath(href, tx))
+            .catch(() => ''),
+        )
+    } else {
+      promises.push(
+        Promise.resolve(
+          transRelPath(window.location.href, (e as HTMLStyleElement).innerText),
+        ),
+      )
+    }
+  })
+  return Promise.all(promises).then((arr) => {
+    return arr.join('\n\n')
+  })
+}
+
+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文件
+  let css = cssText.replace(/url\(\s*(.+?)\s*\)/gi, (m, path0) => {
+    if (path0.match(/^['"\s]?data:/)) return m
+    const path = path0.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 compareTo0 = compareTo.split('#')[0]
+  const pos = compareTo0.lastIndexOf('/')
+  if (pos > -1) {
+    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 -= 1
+      }
+    }
+    return arr.join('/')
+  }
+  return path
+}
+
+function urlToDataUrl(url: string): Promise<string> {
+  return fetch(url)
+    .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
+        }),
+    )
+}