A submission form accepts PNG files, but your report is an HTML page. Render the section you need with html2canvas, then export the resulting canvas. Keep the reading page as well: the image is a fixed visual copy with no working links or filters.
The example captures a fictional dispatch note containing three parcels and a 24-item total. Only that note belongs in the image. The editor, export button, and surrounding instructions stay outside the capture target.
Open the source and exported result · Download the complete HTML
Capture a specific element
Give the note a stable container and a plain background. After loading html2canvas, wait for its promise before converting the returned canvas:
const target = document.querySelector('#dispatch-note');
const canvas = await html2canvas(target, {
backgroundColor: '#ffffff',
scale: 2
});
const png = canvas.toDataURL('image/png');
document.querySelector('#image-preview').src = png;
scale: 2 creates twice as many pixels along each dimension as the target's CSS size. A 320-by-180 CSS-pixel note therefore produces a 640-by-360 image. Do not confuse the larger bitmap with a larger printed document.
For the complete page, see the downloadable HTML example. It includes the library, the capture target, and the preview logic in one file. It does not call a screenshot service or send the note to a backend.
The on-page example compares the prepared source with its actual Chrome PNG. Use the complete HTML download to edit the label and create a fresh image.
Keep the design within the renderer's support
html2canvas reconstructs a representation from the document. Its documentation explains that it does not take an operating-system screenshot, and that CSS support is limited to the properties the library implements.
Start with the note's text, borders, spacing, and background. If the generated image differs from the browser view, simplify the relevant effect and compare the result again. A successful promise says the render completed; it does not prove every visual detail was preserved.
Resolve image origins before export
An image from another site can make canvas export fail or be excluded, depending on its origin permissions and the capture options. useCORS: true asks for a cross-origin load; it does not grant permission on the remote server.
The html2canvas FAQ describes these canvas restrictions. The prepared note uses no remote image, so its output does not depend on another site's image policy. For your real report, use an approved embedded asset or a properly configured source and inspect the resulting bitmap.
Clear the previous result when the note changes
The example has an editable parcel label. Changing it removes the previous image preview and its ready message. Until the next export finishes, the page should not display an old image beside new text as though they match.
If the label is empty, the export control is disabled and the page asks for a label. If rendering throws an error, keep the source note visible and show the failure. Do not leave the previous success state in place.
Compare the new image with the source note before using it: the parcel label, three parcel rows, and 24-item total must agree. HTML to image and PDF covers browser capture and print when a library-based image is unnecessary.
After submitting the PNG to the required form, keep the HTML reading copy with the working material. For review in NOS, the original page preserves the text and structure that the exported pixels cannot carry.