31.9K ·GitHub
What is this?
html2canvas is a JavaScript library that takes 'screenshots' of webpages or parts of them directly in the user's browser, without needing a server.
html2canvas is a JavaScript library that takes 'screenshots' of webpages or parts of them directly in the user's browser, without needing a server.Does it actually capture a real screenshot, or something else?No, it doesn't take a real screenshot. It reads the DOM and the CSS styles applied to elements and reconstructs the page as a canvas image, so it may not be 100% visually accurate.
No, it doesn't take a real screenshot. It reads the DOM and the CSS styles applied to elements and reconstructs the page as a canvas image, so it may not be 100% visually accurate.How do I use it in my project?Include html2canvas and call html2canvas(element, options), which returns a Promise resolving to a canvas you can append to the page, e.g. html2canvas(document.body).then(canvas => document.body.appendChild(canvas)).
Include html2canvas and call html2canvas(element, options), which returns a Promise resolving to a canvas you can append to the page, e.g. html2canvas(document.body).then(canvas => document.body.appendChild(canvas)).Do I need anything else, like a Promise polyfill?It relies on Promises being available globally; for older browsers without native Promise support you need to include a polyfill such as es6-promise before loading html2canvas.
It relies on Promises being available globally; for older browsers without native Promise support you need to include a polyfill such as es6-promise before loading html2canvas.Any catches, like cross-origin content or Node.js support?It's heavily browser-dependent so it can't run in Node.js, and it can't bypass browser content policies, so rendering cross-origin content needs a proxy to serve it from the same origin. The author also calls it experimental and not yet recommended for production.
It's heavily browser-dependent so it can't run in Node.js, and it can't bypass browser content policies, so rendering cross-origin content needs a proxy to serve it from the same origin. The author also calls it experimental and not yet recommended for production.Which browsers does it support?It works on Firefox 3.5+, Chrome, Opera 12+, IE9+, and Safari 6+ (with a Promise polyfill), since every supported CSS property has to be manually implemented.
It works on Firefox 3.5+, Chrome, Opera 12+, IE9+, and Safari 6+ (with a Promise polyfill), since every supported CSS property has to be manually implemented.Why can't it just screenshot the real pixels of the page?Because it runs entirely in the browser without server-side rendering, it has to rebuild the page visually by reading the DOM and CSS, which means not every CSS property is supported yet.
Because it runs entirely in the browser without server-side rendering, it has to rebuild the page visually by reading the DOM and CSS, which means not every CSS property is supported yet.Is CSS support complete?No, each CSS property has to be manually implemented for support, so there are a number of CSS properties that aren't yet handled.
No, each CSS property has to be manually implemented for support, so there are a number of CSS properties that aren't yet handled.What are similar projects?dom-to-image, pixijs, pretext, virtual-dom, anime, react-three-fiber, million, paper.js
dom-to-image, pixijs, pretext, virtual-dom, anime, react-three-fiber, million, paper.js