html2canvas-pro

Next generation JavaScript screenshot tool.

Getting Started

Why html2canvas-pro?

html2canvas-pro is a fork of niklasvh/html2canvas that includes various fixes and new features. It offers several advantages over the original html2canvas:

• Color function color() (including relative colors)
• Color functions lab() / lch() / oklab() / oklch()
• object-fit support for <img/>
• CSS clip-path support (inset, circle, ellipse, polygon, path)
• CSS writing-mode support (horizontal-tb, vertical-rl, vertical-lr)
• 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
• Various bug fixes from the changelog

If you found this helpful, don't forget to leave a star .

Installation

npm install html2canvas-pro
pnpm add html2canvas-pro
yarn add html2canvas-pro

Usage

import html2canvas from 'html2canvas-pro';

To render an element with html2canvas-pro with some (optional) options, simply call html2canvas(element, options);

Basic Example

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

Controlling Output Dimensions

Important: By default, the output canvas dimensions are affected by devicePixelRatio.

// 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 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 or reach out to @yorickshan.

License

MIT