# # 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);