Snapshot tool

API

Capture screenshot image

const pageRender = pdfViewer.getPDFPageRender(pageIndex);
pageRender.getSnapshot(left, top, width, height).then(imageBlob => {
    // Get the image stream.
});

Capture screenshot image of the specified page

pdfViewer.takeSnapshot(pageIndex, left, top, width, height).then(imageBlob=>{
     // Get the image stream.
});

Copy image data to clipboard

pdfViewer.copySnapshot(imageBlob).then(function(){
    // Succeed to Copy image data to clipboard.
});

Image storage service

The API for image storage service

The API for uploading images

pdfViewer.uploadImage(imageBlob).then(function(imgURL){
    // Succeed to upload image blob data to the snapshot server.
});

request method: POST, request address: /snapshot/upload?filefield={}, BODY is the image stream, return: /snapshot/image/{imageid}

The API for downloading images

request method: GET, request address: /snapshot/image/{imageid}

Customize image storage service

Foxit PDF SDK for Web provides a built-in image storage service implementation, allowing you to modify the image uploading behavior by configuring specific parameters, as demonstrated below:

new PDFViewer({
    snapshotServer: new SnapshotServer({
        // The API for uploading images.
        uploadSnapshotAPIPath: 'snapshot/upload',
        // Parse the contents that responds from the server, and parse it to a image URL. The default implementation is return resp.

        // Assuming that the server returns {success: true, data: {url: '/snapshot/image/xxx'}}, then you need to implement it as follow:
        render: function(resp) {
            return resp;
        }
    })
})

If you need to customize additional features, such as adding custom request headers, pre-request permission validation, and more, you can implement your own SnapshotServer object:

new PDFViewer({
    snapshotServer: {
        render(_) {
            return _;
        },
        uploadImage(imageBlob) {
            return fetch(`/snapshot/upload/?filefield=file`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'X-File-Name': 'snapshot.png'
                },
                body: imageBlob
            }).then(response => {
                return response.text();
            })
        }
    }
})

Example

// If you need to upload images to a specified server, then you need to create a custom image storage service.
const SnapshotServer = PDFViewCtrl.SnapshotServer;
const pdfui = new PDFUI({
    ...
    viewerOptions: {
        snapshotServer: new SnapshotServer({
            origin: location.origin,
            uploadSnapshotAPIPath: 'snapshot/upload',
            payloadFieldName: 'file',
            method: 'POST',
            render: function(resp) {
                return resp;
            }
        })
        ...
    }
})
var pdfviewer = await pdfui.getPDFViewer();
// Capture a screenshot of a specified area on a designated page.
var imageBlob = await pdfviewer.takeSnapshot(0, 0, 0, 200, 200);
// Upload images to a specified server.
var uploadResult = await pdfviewer.uploadImage(imageBlob);
// Capture the image and copy it to the clipboard.
var copyResult = await pdfviewer.copySnapshot(uploadResult);