Snapshot tool

API

Capture the picture of the specified area on the page

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

Capture the picture of the specified area on the 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 hosting service

The API for image hosting service

The interface 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 interface for downloading images

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

Customize image hosting service

new PDFViewer({
    snapshotServer: new SnapshotServer({
        // The interface 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) {
            if(resp.success) {
                return resp.data.url;
            } else {
                throw new Error('Snapshot server error');
            }
        }
    })
})

Example

// If you need to upload images to a specified server, then you need to create a custom image hosting 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) {
                if(resp.success) {
                    return resp.data.url;
                } else {
                    throw new Error('Snapshot server error');
                }
            }
        })
        ...
    }
})
var pdfviewer = await pdfui.getPDFViewer();
// Capture the picture of the specified area on the 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 picture and copy it to the clipboard
var copyResult = await pdfviewer.copySnapshot(imageBlob);