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 density; scale changes captured dimensions. Prefer the smallest values that meet the destination requirement to control memory and encode time.
Compare normal and 2× output
Capture the same target with the default settings or fixed DPR 2 and compare pixel dimensions.
Resolution test
Fine text and one-pixel rules reveal the output density.
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.
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.
Does SVG need a high DPR?
No. SVG remains scalable until it is rasterized. DPR matters for PNG, JPEG, WebP and Canvas exports.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm