Implement a Snapshot button in Foxit PDF SDK for Web

The snapshot functionality is disabled by default in Foxit PDF SDK for Web UI, but it is included in the viewer core and you can implement easily. This article shows the many ways you can implement that useful tool in your application.

Enable the built-in button

Following this tutorial, this is how the default UI snapshot button will be displayed:

To enable the snapshot, you must modify the scripts/control/toolbar/toolbar-config.bundle.js. Find the target tab group variable and add the button to the JS scope. The following example will place the snapshot icon on the right side of the Hand tool under Home tab.

var homeTab = {
        type: 'groups',
        groups: [{
            layout: 'flow',
            gap: 'md',
            sub: [{
                ga: { ct: 'Home' },
                extend: 'hand'
            }, {
                extend: 'snapshot'
            }]
        }]
        // ...
}

Add your own Snapshot button

If you want to add your own snapshot button, you need to add the new icon in your CSS. Then, you can add iconCls to overwrite the default settings and define the icon style of your choice. If you want to define a new controller for it, use the following method to set current tool as the snapshot tool:

var snapshotToolHandler = WebPDF.ViewerInstance.getToolHandlerByName(WebPDF.Tools.TOOL_NAME_SNAPSHOT);
WebPDF.ViewerInstance.setCurToolHandler(snapshotToolHandler);

To understand how to customize controllers in Foxit PDF SDK for Web, refer to the section “Customize controller example” in …\docs\tutorial\toolbar_en.html

Configure your Snapshot Function

By configuring your Snapshot function, you can choose what to do with the data received from the triggered ‘snapshot’ event. The article provides two methods of achieving that:

Copy the image to clipboard

This is a very useful functionality, storing the image in your clipboard for use within the application. In order to copy the image to clipboard, you will need to configure a server like node.js to convert the image stream to be homologous with your current HTTP URL. The copied image is an Uint8Array data, that is not allowed to be copied directly to clipboard based on the security restrictions of Chrome browser (non-homologous image streams can’t be copied).

Here is the sample code to be added to configure the snapshot method:

WebPDF.ready(docViewerId, {
 
    snapshot: {
        copy: true,
        imageServerPath: '/api/snapshot/upload',
        render: function(ret) {
            return '/api' + ret;
        }
    }
})

Parameter description:

Copy: Copy to clipboard or not.

True: This will copy the image data to clipboard.

False: Pass image to SCREEN_CAPTURE event.

imageServerPath: The server path the image will be uploaded to.

render: If your image is not a valid image URL, use this method to render it as an image URL. Otherwise, ignore this parameter.

Pass image to SCREEN_CAPTURE event

This method won’t copy the image data to the clipboard directly, instead, once the user clicks the OK button after selecting an area on the page, a WebPDF.EventList.SCREEN_CAPTURE event is triggered to pass the data. You choose how to handle the image data in your application after that.

WebPDF.ready(docViewerId, {
    snapshot: {
        copy: false
    }
    // ...
})

Once you’ve defined the event, you may catch the image data directly from SCREEN_CAPTURE event using the code as below:

WebPDF.ViewerInstance.on(WebPDF.EventList.SCREEN_CAPTURE, function(event, snapshot){
    snapshot.data
    snapshot.dataurl
    snapshot.mime
})

Parameter description:

snapshot.data: Unit8Array image data stream

snapshot.dataurl: Base64 image data url

snapshot.mime: image format: image/png