How to screenshot a div in JavaScript

Select and prepare the capture root

This recipe covers the element itself: selecting an attached, rendered div and capturing its current layout. To choose between a preview, a downloaded PNG and an upload-ready Blob, continue with the HTML to PNG output recipe.

Attach the div to the document and give it a measurable layout; display: none is not a renderable target. Wait for your application’s data and framework DOM update, then settle fonts and images in that element:

const el = document.querySelector('#card');
await document.fonts.ready;
await Promise.all(Array.from(el.querySelectorAll('img'), img => img.decode()));
const img = await snapdom.toPng(el);

If image decoding rejects, fix or replace the failed asset before retrying. For an embedded document or custom element, see the iframe and Shadow DOM recipes.

Step 1 — Install SnapDOM

npm install @zumer/snapdom@latest

If you don't use a bundler, you can also use the CDN build:

<script type="module">
  import { snapdom } from "https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.mjs";
</script>

Step 2 — Pick the div you want to screenshot

Anything that's part of the live document tree works. Most people use document.querySelector:

const el = document.querySelector('#card');

The element doesn't need to be visible inside the viewport, but it does need to be attached to the document (not display: none).

Step 3 — Capture it

One line:

import { snapdom } from '@zumer/snapdom';

const img = await snapdom.toPng(el);

The returned img is a real HTMLImageElement with the captured content as its src (a PNG data URL).

Step 4 — Do something with the image

Append it to the page

const img = await snapdom.toPng(el);
document.body.appendChild(img);

Download it as a file

const result = await snapdom(el);
await result.download({ format: 'png', filename: 'card' });

Get a Blob to upload to a server

const blob = await snapdom.toBlob(el, { format: 'png' });

const form = new FormData();
form.append('file', blob, 'screenshot.png');
await fetch('/api/upload', { method: 'POST', body: form });

Full working example

Drop this into a fresh HTML file and open it in a browser:

<!DOCTYPE html>
<html>
<body>
  <div id="card" style="padding:24px;background:#6366f1;color:#fff;border-radius:12px;">
    <h2>Hello SnapDOM</h2>
    <p>This entire div is about to become a PNG.</p>
  </div>
  <button id="go">Capture</button>

  <script type="module">
    import { snapdom } from "https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.mjs";

    document.getElementById('go').addEventListener('click', async () => {
      const img = await snapdom.toPng(document.getElementById('card'));
      document.body.appendChild(img);
    });
  </script>
</body>
</html>

Or try it right here

The example above, running on this page — same div, same snapdom.toPng call:

Useful options

• dpr: 2 — pixel density (auto-detects window.devicePixelRatio for retina; override here when you need a fixed value).
• scale: 2 — multiply the captured size (zoom). Different from dpr: scale makes the output bigger, dpr makes it sharper at the same logical size.
• backgroundColor: '#fff' — fill transparent areas with a colour.
• embedFonts: 'auto' — the v3 default embeds used web fonts.
• exclude: ['.skip'] — skip any element matching the selector.
• useProxy: 'https://your-proxy.example.com/' — fetch cross-origin images through a CORS proxy.