html2canvas-pro
Next generation JavaScript screenshots tool.
Getting Started
| DeepWiki
## Why html2canvas-pro?
html2canvas-pro is a fork of [niklasvh/html2canvas](https://github.com/niklasvh/html2canvas) that includes various fixes and new features. It offers several advantages over the original html2canvas, such as:
- support color function ```color()``` (including relative colors)
- support color function ```lab()```
- support color function ```lch()```
- support color function ```oklab()```
- support color function ```oklch()```
- Support object-fit of ```![]()
```
- **Image smoothing control** - Support CSS `image-rendering` property and global `imageSmoothing` option for pixel art and retro graphics
- Fixed some [issues](./CHANGELOG.md)
If you found this helpful, don't forget to
leave a star 🌟.
## Installation
```sh
npm install html2canvas-pro
pnpm / yarn add html2canvas-pro
```
## Usage
```javascript
import html2canvas from 'html2canvas-pro';
```
To render an `element` with html2canvas-pro with some (optional) [options](/docs/configuration.md), simply call `html2canvas(element, options);`
### Basic Example
```javascript
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
```
### Controlling Output Dimensions
⚠️ **Important**: By default, the output canvas dimensions are affected by `devicePixelRatio`.
```javascript
// If you need exact pixel dimensions (e.g., for a specific file size):
html2canvas(element, {
width: 1920,
height: 1080,
scale: 1 // Set scale to 1 for exact dimensions
}).then(canvas => {
// Canvas will be exactly 1920×1080 pixels
const dataURL = canvas.toDataURL('image/png');
});
```
See the [Configuration Guide](/docs/configuration.md#canvas-dimensions) for more details.
## Contribution
If you want to add some features, feel free to submit PR.
If you want to become a maintainer on it, please contact me.
## License
[MIT](LICENSE).