Image Smoothing Demo

This demo shows how html2canvas-pro handles different image-rendering CSS properties and global imageSmoothing options.

Test 1: CSS image-rendering Property

These images use different CSS image-rendering values:

pixelated

CSS: image-rendering: pixelated

crisp-edges

CSS: image-rendering: crisp-edges

smooth (default)

CSS: image-rendering: smooth

auto

CSS: image-rendering: auto

Test 2: Global imageSmoothing Option

Same image rendered with different global options:

Original

Test 3: Low Resolution Image Upscaling

A small pixel art image upscaled to show the smoothing difference:

8x8 Pixel Art