福昕开发者文档中心

截图工具 (Snapshot) ​

Foxit PDF SDK for Web 提供了完整的截图功能支持。

截图接口 ​

获取截图图片 ​

TIP

通过 getPDFPageRender 获取页面渲染器，然后调用 getSnapshot 方法获取指定区域的截图。

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

获取指定页面截图图片 ​

TIP

直接使用 takeSnapshot 方法获取指定页面的截图。

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

拷贝图片到剪贴板 ​

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

图片存储服务 ​

SDK 图片存储服务接口 ​

上传图片接口 ​

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

接口说明

  • 请求方法：POST
  • 接口请求地址：/snapshot/upload?filefield={}
  • 请求体：图片流
  • 返回内容：/snapshot/image/{imageid}

下载图片接口 ​

接口说明

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

自定义图片存储服务 ​

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

javascript
new PDFViewer({
    snapshotServer: new SnapshotServer({
        // 上传图片接口
        uploadSnapshotAPIPath: 'snapshot/upload',
        // 解析服务端响应内容，解析成图片URL
        render: function (resp) {
            return resp;
        }
    })
})

TIP

如果服务端返回格式为 {success: true, data: {url: '/snapshot/image/xxx'}}，则需要相应地实现 render 函数来解析返回数据。

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

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

示例 ​

javascript
// 如果需上传图片到指定服务器，则需要创建自定义图片存储服务。
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);