Skip to content

Commit ab49c48

Browse files
author
Benjamin Grand
committed
docs: update readme
1 parent 7e6ec7c commit ab49c48

File tree

3 files changed

+106
-53
lines changed

3 files changed

+106
-53
lines changed

‎README.md‎

Lines changed: 97 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
1-
html2canvas
1+
html2canvas with "skipClone"
22
===========
33

4-
[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)
4+
## JavaScript HTML renderer ##
55

6-
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
7-
![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master)
8-
[![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
9-
[![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
6+
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
107

11-
#### JavaScript HTML renderer ####
8+
## How does it work? ##
129

13-
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
14-
15-
16-
### How does it work? ###
1710
The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.
1811

1912
It does **not require any rendering from the server**, as the whole image is created on the **client's browser**. However, as it is heavily dependent on the browser, this library is *not suitable* to be used in nodejs.
20-
It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a [proxy](https://github.com/niklasvh/html2canvas/wiki/Proxies) to get the content to the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy).
2113

22-
The script is still in a **very experimental state**, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.
23-
24-
### Browser compatibility ###
14+
## Browser compatibility ##
2515

2616
The library should work fine on the following browsers (with `Promise` polyfill):
2717

@@ -31,43 +21,106 @@ The library should work fine on the following browsers (with `Promise` polyfill)
3121
* IE9+
3222
* Safari 6+
3323

34-
As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.
35-
36-
### Usage ###
37-
38-
The html2canvas library utilizes `Promise`s and expects them to be available in the global context. If you wish to
39-
support [older browsers](http://caniuse.com/#search=promise) that do not natively support `Promise`s, please include a polyfill such as
40-
[es6-promise](https://github.com/jakearchibald/es6-promise) before including `html2canvas`.
24+
## Installation ##
4125

42-
To render an `element` with html2canvas, simply call:
43-
` html2canvas(element[, options]);`
26+
```shell
27+
npm install [email protected]
28+
```
4429

45-
The function returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) containing the `<canvas>` element. Simply add a promise fulfillment handler to the promise using `then`:
30+
### NPM package aliasing ###
4631

47-
html2canvas(document.body).then(function(canvas) {
48-
document.body.appendChild(canvas);
49-
});
32+
```json
33+
{
34+
"dependencies": {
35+
"html2canvas": "npm:[email protected]"
36+
}
37+
}
38+
```
5039

51-
### Building ###
40+
## Usage ##
5241

53-
You can download ready builds [here](https://github.com/niklasvh/html2canvas/releases).
54-
55-
Clone git repository:
56-
57-
$ git clone git://github.com/niklasvh/html2canvas.git
58-
59-
Install dependencies:
60-
61-
$ npm install
42+
To render an `element` with html2canvas, simply call:
6243

63-
Build browser bundle
44+
```ts
45+
html2canvas(element[, options]);
46+
```
6447

65-
$ npm run build
48+
The function returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) containing the `<canvas>` element. Simply add a promise fulfillment handler to the promise using `then`:
6649

67-
### Examples ###
50+
```ts
51+
html2canvas(document.body).then((canvas: HTMLCanvasElement) => {
52+
document.body.appendChild(canvas);
53+
});
54+
```
6855

69-
For more information and examples, please visit the [homepage](https://html2canvas.hertzen.com) or try the [test console](https://html2canvas.hertzen.com/tests/).
56+
## CSS supported properties ##
7057

71-
### Contributing ###
58+
As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.
7259

73-
If you wish to contribute to the project, please send the pull requests to the develop branch. Before submitting any changes, try and test that the changes work with all the support browsers. If some CSS property isn't supported or is incomplete, please create appropriate tests for it as well before submitting any code changes.
60+
Below is a list of all the supported CSS properties and values.
61+
62+
- background
63+
- background-clip (**Does not support `text`**)
64+
- background-color
65+
- background-image
66+
- url()
67+
- linear-gradient()
68+
- radial-gradient()
69+
- background-origin
70+
- background-position
71+
- background-size
72+
- border
73+
- border-color
74+
- border-radius
75+
- border-style
76+
- border-width
77+
- bottom
78+
- box-sizing
79+
- content
80+
- color
81+
- display
82+
- flex
83+
- float
84+
- font
85+
- font-family
86+
- font-size
87+
- font-style
88+
- font-variant
89+
- font-weight
90+
- height
91+
- left
92+
- letter-spacing
93+
- line-break
94+
- list-style
95+
- list-style-image
96+
- list-style-position
97+
- list-style-type
98+
- margin
99+
- max-height
100+
- max-width
101+
- min-height
102+
- min-width
103+
- opacity
104+
- overflow
105+
- overflow-wrap
106+
- padding
107+
- paint-order
108+
- position
109+
- right
110+
- text-align
111+
- text-decoration
112+
- text-decoration-color
113+
- text-decoration-line
114+
- text-decoration-style (**Only supports `solid`**)
115+
- text-shadow
116+
- text-transform
117+
- top
118+
- transform (**Limited support**)
119+
- visibility
120+
- white-space
121+
- width
122+
- webkit-text-stroke
123+
- word-break
124+
- word-spacing
125+
- word-wrap
126+
- z-index

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"title": "html-to-canvas",
3-
"name": "html-to-canvas",
2+
"title": "html2canvas-skipclone",
3+
"name": "html2canvas-skipclone",
44
"description": "Screenshots with JavaScript",
55
"main": "dist/html2canvas.js",
66
"module": "dist/html2canvas.esm.js",
@@ -108,13 +108,13 @@
108108
"engines": {
109109
"node": ">=8.0.0"
110110
},
111-
"homepage": "https://github.com/bgrand-ch/html-to-canvas",
111+
"homepage": "https://github.com/bgrand-ch/html2canvas",
112112
"repository": {
113113
"type": "git",
114-
"url": "[email protected]:bgrand-ch/html-to-canvas.git"
114+
"url": "[email protected]:bgrand-ch/html2canvas.git"
115115
},
116116
"bugs": {
117-
"url": "https://github.com/bgrand-ch/html-to-canvas/issues"
117+
"url": "https://github.com/bgrand-ch/html2canvas/issues"
118118
},
119119
"author": {
120120
"name": "Niklas von Hertzen",

0 commit comments

Comments
 (0)