dom-to-image: create a PNG from one HTML report block

You need the summary block from a report, rather than an image of the whole browser window. Pass that block to domtoimage.toPng() and use the returned data URL for a preview. The library targets a document node; your surrounding toolbar can stay out of the result.

The example uses a fictional equipment note. Three items are Ready and one is Held. The exported block includes those labels and the four item names, so the image remains understandable without the controls that created it.

Open the source and exported result · Download the complete HTML

Select the block that should travel

Keep the capture target separate from its editor and preview. After loading the browser distribution, the basic operation is:

const node = document.querySelector('#equipment-note');
try {
  const url = await domtoimage.toPng(node, {
    bgcolor: '#ffffff'
  });
  document.querySelector('#result').src = url;
} catch (error) {
  document.querySelector('#status').textContent =
    'Image export failed. Keep the HTML note available.';
}

The complete example includes the library in the HTML, along with the note and preview code. Its ordinary text and CSS do not depend on a remote font or image. Keep a dated copy of the output only when a fixed image is the format the receiving system actually requires.

The on-page comparison shows the source and a real prepared Chrome export. Open the complete HTML download to change the batch label and generate another PNG.

Understand the SVG step

dom-to-image clones the node and packages its appearance in SVG using foreignObject before producing the raster image. This is a different rendering route from html2canvas's document reconstruction. Its project documentation explains that process, the output methods, and browser limitations.

That difference matters when diagnosing a mismatch. If a complex style disappears, inspect a small reproduction of that style before changing the report's data. If an external asset cannot be embedded, resolve the asset dependency rather than replacing the missing visual with an unexplained blank space.

The project's documentation states that Safari is not supported because of its stricter foreignObject security behavior. Do not promise identical output across browsers on the basis of one successful Chrome export. For a workflow that must serve a different browser, test that browser's real result or use a different capture method.

Keep an old image from posing as a new result

The example lets you rename the equipment batch. Editing the name clears the previous image and its ready message. A blank name disables export. During rendering, disable the export button so repeated clicks do not race to replace the preview with different versions.

When the promise resolves, compare the image with the source block: all four names, the batch label, and the three Ready / one Held split must agree. A successful image conversion does not establish that those statuses are true in an equipment system; the source data still needs your review.

Choose the right handoff

The PNG is useful for a slide or a field that accepts images. Keep the HTML for readers who need selectable text or links. The browser export guide covers screenshots and PDF when you do not need a conversion library inside the page.

If you use NOS for the HTML reading copy, retain the equipment note and its source context there. Send the fixed image to the system that requested it, with the date and purpose attached, so it cannot be mistaken for a live status display.