如何在添加自定义图章时获取其Base64数据？—基于annotationAdded事件的实现方案

福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)

如何在添加自定义图章时获取其Base64数据？—基于annotationAdded事件的实现方案

福昕知识库
2025-04-28

使用图章工具在页面上添加自定义图章时，开发者可能需要获取当前图章的图像数据（如Base64格式）。通过监听annotationAdded事件，可以轻松实现这一需求。以下是具体实现方法：

当在页面上添加注释时，系统会触发annotationAdded事件。在该事件的回调函数中，可以获取到刚添加的注释对象数组。对于图章类型的注释对象，开发者可以通过调用getImage接口，按指定格式（’canvas’、’image’或’buffer’）获取图章的图像数据。

示例代码如下：

function blobToDataURI(blob, callback) {
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function (e) {
        callback(e.target.result);
    }
}
//在annotationAdded监听事件的回调中拿到Stamp注释对象annot后，通过getImage接口获取图章的图像数据
pdfui.eventEmitter.on(PDF.constant.DataEvents.annotationAdded, async (annotations) => {
    let annot = annotations.find((item) => item.info.type != "popup");
    
    var imageBuf = await annot.getImage('buffer');
    var blob = new Blob([imageBuf], {type: 'image/png'});

    //以png图片形式下载该图章
    var url = URL.createObjectURL(blob);
    console.log(url);
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', "test");
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href); // 释放URL 对象
    document.body.removeChild(link);

    //将blob格式转换为base64格式
    blobToDataURI(blob,function(result){    
        console.log(result);
    })
})