feat: add usePageCss option, add toCanvasList and toImage method for large html

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
 

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))
 }

src/index.ts

@@ -10,6 +10,7 @@
   canvasToBlob,
   nodeToDataURL,
   checkCanvasDimensions,
+  getDimensionLimit,
 } from './util'
 
 export async function toSvg<T extends HTMLElement>(
@@ -21,18 +22,24 @@
   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
 }
 
+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 @@
   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 = {},

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
 }

src/util.ts

@@ -129,19 +129,62 @@
         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 = {},
@@ -203,13 +246,16 @@
   node: HTMLElement,
   width: number,
   height: number,
+  usePageCss?: boolean,
 ): 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}`)
+  // 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.
+  const ratio = getPixelRatio()
+  svg.setAttribute('width', `${width / ratio}`)
+  svg.setAttribute('height', `${height / ratio}`)
   svg.setAttribute('viewBox', `0 0 ${width} ${height}`)
 
   foreignObject.setAttribute('width', '100%')
@@ -220,6 +266,12 @@
 
   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 +292,25 @@
     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())
+            .catch(() => ''),
+        )
+    } else {
+      promises.push(Promise.resolve(e.innerHTML))
+    }
+  })
+  return Promise.all(promises).then((arr) => {
+    return arr.join('\n\n')
+  })
+}