截图工具 (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}

自定义图片存储服务

我们提供了内置的图片存储服务实现，通过内置的实现，可以通过配置指定一部分参数来修改上传图片的行为， 如下所示：

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