Snapshot tool

Foxit PDF SDK for Web provides a snapshot tool so you can capture a region of a PDF page and use the image for preview, upload, clipboard copy, or custom workflows.

Snapshot capabilities include:

• Capture a region via PDFPageRender.getSnapshot() or PDFViewer.takeSnapshot().
• Upload snapshot images with PDFViewer.uploadImage() and SnapshotServer to obtain a reachable image URL.
• Copy snapshots to the system clipboard with PDFViewer.copySnapshot().

Snapshot APIs

Capture via page render

PDFPageRender.getSnapshot(left, top, width, height) captures a region on the current page render object.

const pageRender = pdfViewer.getPDFPageRender(pageIndex);

if (pageRender) {
    const imageBlob = await pageRender.getSnapshot(left, top, width, height);
    // Image data for the specified page region.
}

Capture via Viewer

PDFViewer.takeSnapshot(pageIndex, left, top, width, height) captures a region on the given page. pageIndex starts at 0.

const imageBlob = await pdfViewer.takeSnapshot(pageIndex, left, top, width, height);
// Image data for the specified page region.

Coordinate parameters

left, top, width, and height use device pixels—offsets and size from the top-left of the page in device pixels.

Parameter	Description
pageIndex	Page index, starting at 0.
left	X offset of the snapshot top-left from the page top-left, in device pixels.
top	Y offset of the snapshot top-left from the page top-left, in device pixels.
width	Snapshot width in device pixels.
height	Snapshot height in device pixels.

If your business logic uses PDF coordinates, convert to device pixels first. See API Reference for PDFPage.getDevicePoint(), PDFPageRender.transformPoint(), and related helpers.

Copy snapshot to clipboard

PDFViewer.copySnapshot(dataURL) copies an image to the system clipboard. Pass an image URL or Data URL string—not a Blob directly.

This example converts the snapshot Blob to a Data URL before copying:

function blobToDataURL(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
}

button.addEventListener('click', async () => {
    const imageBlob = await pdfViewer.takeSnapshot(0, 0, 0, 200, 200);
    const dataURL = await blobToDataURL(imageBlob);
    const copied = await pdfViewer.copySnapshot(dataURL);

    if (copied) {
        console.log('Snapshot copied to clipboard');
    }
});

WARNING

Browser security policies usually require clipboard access inside a short-lived user gesture (for example a button click). Clipboard APIs also need a secure context such as HTTPS or localhost.

Image storage service

Upload snapshot image

PDFViewer.uploadImage(blob) uploads via the snapshot image storage service and returns an accessible image URL.

const imageBlob = await pdfViewer.takeSnapshot(0, 0, 0, 200, 200);
const imageURL = await pdfViewer.uploadImage(imageBlob);

console.log('Snapshot image URL:', imageURL);

Typical uses:

• Save snapshots to your application server.
• Obtain same-origin image URLs to avoid cross-origin or clipboard limits in some browsers.
• Store image URLs in business data or send them to other systems.

Default image storage service

The SDK includes SnapshotServer. Configure upload behavior with viewerOptions.snapshotServer.

const SnapshotServer = PDFViewCtrl.SnapshotServer;

const pdfui = new PDFUI({
    viewerOptions: {
        snapshotServer: new SnapshotServer({
            origin: location.origin,
            uploadSnapshotAPIPath: 'snapshot/upload',
            payloadFieldName: 'file',
            method: 'POST',
            render: function (responseText) {
                return responseText;
            }
        })
    },
    renderTo: document.body
});

Common SnapshotServer options:

Option	Description
origin	Service origin (domain).
uploadSnapshotAPIPath	Upload API path.
payloadFieldName	Form field name for the file; default file.
method	HTTP method: POST or PUT.
render(responseText)	Parse the server response and return the final image URL.

Tip

If the server returns { success: true, data: { url: '/snapshot/image/xxx' } }, parse and return data.url in render.

const snapshotServer = new SnapshotServer({
    uploadSnapshotAPIPath: 'snapshot/upload',
    render: function (responseText) {
        const result = JSON.parse(responseText);
        return result.data.url;
    }
});

Custom image storage service

For custom headers, auth, pre-upload validation, or special response parsing, provide a custom snapshotServer object.

const pdfui = new PDFUI({
    viewerOptions: {
        snapshotServer: {
            render(responseText) {
                const result = JSON.parse(responseText);
                return result.url;
            },
            uploadImage(imageBlob) {
                const formData = new FormData();
                formData.append('file', imageBlob, 'snapshot.png');

                return fetch('/snapshot/upload', {
                    method: 'POST',
                    headers: {
                        Authorization: `Bearer ${token}`
                    },
                    body: formData
                })
                    .then(response => response.text())
                    .then(responseText => this.render(responseText));
            }
        }
    },
    renderTo: document.body
});

Snapshot UI entry points

With UIExtension, the SDK provides pre-configured snapshot components:

• <snapshot-button>: Standard button entry.
• <snapshot-ribbon-button>: Ribbon button entry (recommended from 8.2.0).
• states:SnapshotToolController: Switches the current state-handler to STATE_HANDLER_SNAPSHOT_TOOL.

Add a snapshot button in a custom layout template:

<snapshot-ribbon-button></snapshot-ribbon-button>

Equivalent base component and controller:

<ribbon-button
    text="toolbar.buttons.snapshot"
    @controller="states:SnapshotToolController"
    @tooltip
    tooltip-title="toolbar.buttons.snapshot"
    name="snapshot-button"
    icon-class="fv__icon-toolbar-snapshot"
>toolbar.buttons.snapshot
</ribbon-button>

See Pre-configured business components for more.

Full example

const SnapshotServer = PDFViewCtrl.SnapshotServer;

function blobToDataURL(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
}

const pdfui = new PDFUI({
    viewerOptions: {
        snapshotServer: new SnapshotServer({
            origin: location.origin,
            uploadSnapshotAPIPath: 'snapshot/upload',
            payloadFieldName: 'file',
            method: 'POST',
            render: function (responseText) {
                return responseText;
            }
        })
    },
    renderTo: document.body
});

const pdfViewer = await pdfui.getPDFViewer();

document.querySelector('#copy-snapshot').addEventListener('click', async () => {
    try {
        // Capture a 200 x 200 region at the top-left of page 1.
        const imageBlob = await pdfViewer.takeSnapshot(0, 0, 0, 200, 200);

        // Upload to your service.
        const imageURL = await pdfViewer.uploadImage(imageBlob);
        console.log('Snapshot image URL:', imageURL);

        // Copy to clipboard.
        const dataURL = await blobToDataURL(imageBlob);
        const copied = await pdfViewer.copySnapshot(dataURL);

        if (!copied) {
            console.warn('Failed to copy snapshot');
        }
    } catch (error) {
        console.error('Snapshot handling failed:', error);
    }
});

Notes

• getSnapshot() and takeSnapshot() capture the rendered page view; they do not change PDF content.
• Region parameters use device pixels, not PDF coordinates.
• Large regions can produce large images; limit capture size for your use case.
• copySnapshot() is subject to clipboard permissions and secure context; call it from a user click when possible.
• PDFPageRender.getSnapshot() is a browser rendering capability and is not supported in server environments.