How to Capture a DOM Element in High Resolution

TL;DR

Use dpr for pixel density and scale when the logical capture itself should be enlarged.

Copy-paste example

Install @zumer/snapdom, select the rendered element, and capture it:

const image = await snapdom.toPng(element, {
  dpr: 2,
  scale: 1.5,
  backgroundColor: '#ffffff',
  embedFonts: true,
})

Why this pattern works

dpr changes raster pixel density. scale changes output dimensions when neither width nor height is set. Explicit dimensions take precedence over scale; use the smallest output that meets your destination requirement.

Compare normal and 2× output

Capture the same target with the default settings or fixed DPR 2 and compare pixel dimensions.

2×

Resolution test

Fine text and one-pixel rules reveal the output density.

The captured result will appear here.

Limits and common mistakes

Doubling width and height produces four times as many pixels. Very high DPR values can exceed browser canvas limits on large elements. download() always uses DPR 1, so pass scale (for example scale: devicePixelRatio) for a sharper downloaded file.

Frequently asked questions

Should I use DPR or scale?

Use DPR for sharper raster output at the same CSS size; use scale to enlarge the capture itself. Downloads always use DPR 1, so use scale for a sharper downloaded file.

Does SVG need a high DPR?

SVG preserves scalable content, but embedded images and canvas snapshots retain their source resolution. DPR affects raster exports such as PNG, JPEG, WebP and Canvas.

Capture it in the browser

Install SnapDOM and turn the DOM your users already see into a portable image.

Open the demo Installation