html2canvas-pro
Next generation JavaScript screenshot tool.
Getting Started
## 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:
- Color functions `color()` (incl. relative colors), `lab()`, `lch()`, `oklab()`, `oklch()`
- `background-clip: text` support
- `mix-blend-mode` support
- `object-fit` support for `![]()
`
- CSS `clip-path` support (inset, circle, ellipse, polygon, path)
- CSS `writing-mode` support (horizontal-tb, vertical-rl, vertical-lr)
- Native `drop-shadow()` filter rendering via the canvas shadow API
- **Image smoothing control** — CSS `image-rendering` property and `imageSmoothing`/`imageSmoothingQuality` options
- **Security validation** — Built-in input validation (XSS/SSRF protection)
- **Performance monitoring** — Built-in performance measurement API
- **Progress & error callbacks** — `onProgress` / `onError` options and `AbortSignal` cancellation
- **Performance optimizations** — deferred CSS parsing and LRU caches for gradients & CSS parsing
- Various bug fixes from the [changelog](./CHANGELOG.md)
If you found this helpful, don't forget to
leave a star 🌟.
## Installation
```sh
npm install html2canvas-pro
pnpm add html2canvas-pro
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'd like to add a feature, feel free to submit a PR.
Interested in becoming a maintainer? Open an [issue](https://github.com/yorickshan/html2canvas-pro/issues) or reach out to [@yorickshan](https://github.com/yorickshan).
## License
[MIT](LICENSE)