# # 截图工具 (Snapshot)

## # 截图接口

### # 获取截图图片

    const pageRender = pdfViewer.getPDFPageRender(pageIndex);
    pageRender.getSnapshot(left, top, width, height).then(imageBlob => {
        // 获取到图片流。
    });

### # 获取指定页面截图图片

    pdfViewer.takeSnapshot(pageIndex, left, top, width, height).then(imageBlob=>{
         // 获取到图片流。
    });

### # 拷贝图片到剪贴板

    pdfViewer.copySnapshot(imageBlob).then(function(){
        // 拷贝成功。
    });

## # 图片存储服务

### # SDK 图片存储服务接口

#### # 上传图片接口

    pdfViewer.uploadImage(imageBlob).then(function(imgURL){
        // 上传成功。
    });

请求方法： POST， 接口请求地址： `/snapshot/upload?filefield={}`, BODY 为图片流， 返回内容： `/snapshot/image/{imageid}`

#### # 下载图片接口

请求方法： GET， 请求地址： `/snapshot/image/{imageid}`

### # 自定义图片存储服务

Foxit PDF SDK for Web 提供了一个内置的图像存储服务实现，允许您通过配置特定的参数来修改图像上传行为，如下所示：

    new PDFViewer({
        snapshotServer: new SnapshotServer({
            // 上传图片接口。
            uploadSnapshotAPIPath: 'snapshot/upload',
            // 解析服务端响应内容，解析成图片URL，默认的实现为直接 return resp。
            // 假设服务端返回 {success: true, data: {url: '/snapshot/image/xxx'}}, 则需要如下实现方式：
            render: function(resp) {
                return resp;
            }
        })
    })

如果您需要自定义其他功能，例如添加自定义请求头、预请求权限验证等，您可以实现自己的 SnapshotServer 对象：

    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();
                })
            }
        }
    })

## # 示例

    // 如果需上传图片到指定服务器，则需要创建自定义图片存储服务。
    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();
    // 获取指定页面的指定区域截图。
    var imageBlob = await pdfviewer.takeSnapshot(0, 0, 0, 200, 200);
    // 上传图片到指定服务器。
    var uploadResult = await pdfviewer.uploadImage(imageBlob);
    // 获取图片并拷贝至剪贴板。
    var copyResult = await pdfviewer.copySnapshot(uploadResult);