Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

html2canfast

tobjoern141MIT1.0.0-rc.6TypeScript support: included

Screenshots with JavaScript

readme

html2canfast

https://codesandbox.io/s/tender-river-ifjlm?file=/src/index.js

What is html2canfast?

html2canfast is an experimental version of html2canvas. As it is a fork of html2canvas, it derives all the syntax and functionality from it, but offers further features, specialized for performance improvements.

How does it work?

html2canfast adds two new (optional) options: renderName and replaceSelector. If you plan to take multiple screenshots of the same element, you can enter the 'fast mode', by passing in both these options. The renderName is an arbitrary key, which is used to, so to say, cache the created container, so it can be accessed in subsequent screenshots, which means html2canfast is only faster on 1+ screenshots. The replaceSelector is the selector for the element you wish to screenshot. html2canvas works by creating an iframe of the complete document on each screenshot, which includes having to request all the images, script, links etc. embedded on your site. This is, for some purposes, extremely inefficient. html2canfast 'caches' this iframe, so that it doesn't have to be re-created on each screenshot.

Example

You have a game, and want to take 1+ screenshots or the game screen, with the selector '#game'. You decide to use the key: 'game-screen'.

const gameScreen = document.getElementById('#game');

html2canvas(gameScreen, {
    renderName: 'game-screen',
    replaceSelector: '#game',
    removeContainer: false
}).then(function(canvas) {
    document.body.appendChild(canvas);
});

It is crucial to note, that the renderName 'game-screen', should from now on only be used to capture screenshots or the '#game' element, as html2canfast replaces this selector in the 'cached' container. Another note, of the utmost importance is that you must pass in the removeContainer option as false. Failing to do so will result in now performance improvements.

How much faster is it?

How much faster html2canfast is, depends mostly on two variables: the overall size (meaning number of elements) of the webpage, and the content size of the external resources (images etc.) embedded on that webpage. With that being said, the performance can be ~10000% or 100 times, faster than html2canvas. Checkout the comparison!

Installation

Available on npm html2canfast

Install:

$ npm i html2canfast

changelog

Change Log

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

1.0.0-rc.5 (2019-09-27)

fix

1.0.0-rc.4 (2019-09-22)

docs

feat

fix

1.0.0-rc.3 (2019-05-30)

fix

1.0.0-rc.2 (2019-05-29)

ci

docs

fix

test

1.0.0-rc.1 (2019-04-10)

ci

docs

fix

test

1.0.0-rc.0 (2019-04-07)

build

ci

docs

fix

1.0.0-alpha.12 (2018-04-05)

  • Fix white space appearing on element rendering (Fix #1438)
  • Reset canvas transform on finish (Fix #1494)

v1.0.0-alpha.11 - 1.4.2018

  • Fix IE11 member not found error
  • Support blob image resources in non-foreignObjectRendering mode

v1.0.0-alpha.10 - 15.2.2018

  • Re-introduce onclone option (Fix #1434)
  • Add ignoreElements predicate function option
  • Fix version console logging

v1.0.0-alpha.9 - 7.1.2018

  • Fix dynamic style sheets
  • Fix > 50% border-radius values

v1.0.0-alpha.8 - 2.1.2018

  • Use correct doctype in cloned Document (Fix #1298)
  • Fix individual border rendering (Fix #1349)

v1.0.0-alpha.7 - 31.12.2017

  • Fix form input rendering (#1338)
  • Improve word line breaking algorithm

v1.0.0-alpha.6 - 28.12.2017

  • Fix list-style: none (#1340)
  • Extend supported values for pseudo element content

v1.0.0-alpha.5 - 21.12.2017

  • Fix underline positioning
  • Fix canvas rendering on Chrome
  • Fix overflow: auto
  • Added support for rendering list-style

    v1.0.0-alpha.4 - 12.12.2017

  • Fix rendering with multiple fonts defined (Fix #796)
  • Add support for radial-gradients
  • Fix logging option (#1302)
  • Add support for rendering webgl canvas content (#646)
  • Fix external SVG loading with proxies (#802)

v1.0.0-alpha.3 - 9.12.2017

  • Disable foreignObjectRendering by default (#1295)
  • Fix background-size when using background-origin and background-size: cover/contain (#1299)
  • Added support for background-origin: content-box (#1299)

v1.0.0-alpha.2 - 7.12.2017

  • Fix scroll positions for CanvasRenderer (#1259)
  • Fix data-html2canvas-ignore attribute (#1253)
  • Fix decimal letter-spacing values (#1293)

v1.0.0-alpha.1 - 5.12.2017

  • Complete rewrite of library
    Breaking Changes
  • Remove deprecated onrendered callback, calling html2canvas returns a Promise<HTMLCanvasElement>
  • Removed option type, same results can be achieved by assigning x, y, scrollX, scrollY, width and height properties.

    New featues / fixes

  • Add support for scaling canvas (defaults to device pixel ratio)
  • Add support for multiple text-shadows
  • Add support for multiple text-decorations
  • Add support for text-decoration-color
  • Add support for percentage values for border-radius
  • Correctly handle px and percentage values in linear-gradients
  • Correctly support all angle types for linear-gradients
  • Add support for multiple values for background-repeat, background-position and background-size

v0.5.0-beta4 - 23.1.2016

  • Fix logger requiring access to window object
  • Derequire browserify build
  • Fix rendering of specific elements when window is scrolled and type isn't set to view

v0.5.0-beta3 - 6.12.2015

  • Handle color names in linear gradients

v0.5.0-beta2 - 20.10.2015

  • Remove Promise polyfill (use native or provide it yourself)

v0.5.0-beta1 - 19.10.2015

  • Fix bug with unmatched color stops in gradients
  • Fix scrolling issues with iOS
  • Correctly handle named colors in gradients
  • Accept matrix3d transforms
  • Fix transparent colors breaking gradients
  • Preserve scrolling positions on render

v0.5.0-alpha2 - 3.2.2015

  • Switch to using browserify for building
  • Fix (#517) Chrome stretches background images with 'auto' or single attributes

v0.5.0-alpha - 19.1.2015

  • Complete rewrite of library
  • Switched interface to return Promise
  • Uses hidden iframe window to perform rendering, allowing async rendering and doesn't force the viewport to be scrolled to the top anymore.
  • Better support for unicode
  • Checkbox/radio button rendering
  • SVG rendering
  • iframe rendering
  • Changed format for proxy requests, permitting binary responses with CORS headers as well
  • Fixed many layering issues (see z-index tests)

v0.4.1 - 7.9.2013

  • Added support for bower
  • Improved z-index ordering
  • Basic implementation for CSS transformations
  • Fixed inline text in top element
  • Basic implementation for text-shadow

v0.4.0 - 30.1.2013

  • Added rendering tests with webdriver
  • Switched to using grunt for building
  • Removed support for IE<9, including any FlashCanvas bits
  • Support for border-radius
  • Support for multiple background images, size, and clipping
  • Support for :before and :after pseudo elements
  • Support for placeholder rendering
  • Reformatted all tests to small units to test specific features

v0.3.4 - 26.6.2012

  • Removed (last?) jQuery dependencies (niklasvh)
  • SVG-powered rendering (niklasvh)
  • Radial gradients (SunboX)
  • Split renderers to their own objects (niklasvh)
  • Simplified API, cleaned up code (niklasvh)

v0.3.3 - 2.3.2012

  • SVG taint fix, and additional taint testing options for rendering (niklasvh)
  • Added support for CORS images and option to create canvas as tainted (niklasvh)
  • Improved minification saved ~1K! (cobexer)
  • Added integrated support for Flashcanvas (niklasvh)
  • Fixed a variety of legacy IE bugs (niklasvh)

v0.3.2 - 20.2.2012

  • Added changelog!
  • Added bookmarklet (cobexer)
  • Option to select single element to render (niklasvh)
  • Fixed closure compiler warnings (cobexer)
  • Enable profiling in FF (cobexer)