使用JavaScript将PDF页面中的标注扁平化的操作指南_Javascript

使用dynamsoft document viewer打开一个pdf文件并启用标注添加功能

创建一个包含以下模板的新html文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>burn pdf annotation</title>
  <style>
  </style>
</head>
<body>
</body>
<script>
</script>
</html>

在页面中包含dynamsoft document viewer的文件。

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.1.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.1.0/dist/ddv.css" rel="external nofollow" >

使用许可证初始化dynamsoft document viewer。可以在这里申请一个证书。

dynamsoft.ddv.core.license = "dls2eyjoyw5kc2hha2vdb2rlijoimjawmdaxlte2ndk4mjk3oti2mzuilcjvcmdhbml6yxrpb25jrci6ijiwmdawmsisinnlc3npb25qyxnzd29yzci6indtcgr6vm05wdjrceq5yuoifq=="; //one-day trial
dynamsoft.ddv.core.engineresourcepath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.1.0/dist/engine";// lead to a folder containing the distributed wasm files
await dynamsoft.ddv.core.init();

创建一个新的文档实例。

const docmanager = dynamsoft.ddv.documentmanager;
const doc = docmanager.createdocument();

创建一个edit viewer实例，将其绑定到一个容器，然后用它来查看我们刚刚创建的文档。其上的按钮可以使用uiconfig对象进行配置。添加标注按钮以添加创建标注的操作入口。

html：

<div id="viewer"></div>

javascript：

dynamsoft.ddv.setprocessinghandler("imagefilter", new dynamsoft.ddv.imagefilter());
let uiconfig = {
  type: "layout",
  flexdirection: "column",
  classname: "ddv-edit-viewer-desktop",
  children: [
    {
      type: "layout",
      classname: "ddv-edit-viewer-header-desktop",
      children: [
        {
          type: "layout",
          children: [
            "thumbnailswitch",
            "fitmode",
            "displaymode",
            "rotateleft",
            "crop",
            "filter",
            "undo",
            "redo",
            "deletecurrent",
            "deleteall",
            "pan",
            "separatorline",
            "annotationset"
          ],
          enablescroll: true
        },
        {
          type: "layout",
          children: [
            {
              "type": "pagination",
              "classname": "ddv-edit-viewer-pagination-desktop"
            },
            {
              type: dynamsoft.ddv.elements.button,
              classname: "ddv-button-download",
              events: {
                click: "exportpdfwithoptions",
              },
            },
          ]
        }
      ]
    },
    "mainview"
  ]
}
editviewer = new dynamsoft.ddv.editviewer({
  uiconfig: uiconfig,
  container: document.getelementbyid("viewer")
});

css：

#viewer {
  width: 320px;
  height: 480px;
}

使用input选择图像或pdf文件，并将其加载到文档实例中。

html：

<label>
  select a file to load:
  <br/>
  <input type="file" id="files" name="files" onchange="filesselected()"/>
</label>

javascript：

async function filesselected(){
  let filesinput = document.getelementbyid("files");
  let files = filesinput.files;
  if (files.length>0) {
    const file = files[0];
    const blob = await readfileasblob(file);
    await doc.loadsource(blob); // load the file
  }
}

function readfileasblob(file){
  return new promise((resolve, reject) => {
    const filereader = new filereader();
    filereader.onload = async function(e){
      const response = await fetch(e.target.result);
      const blob = await response.blob();
      resolve(blob);
    };
    filereader.onerror = function () {
      reject('oops, something went wrong.');
    };
    filereader.readasdataurl(file);
  })
}

我们将能够看到如下查看器：

扁平化标注并保存pdf

dynamsoft document viewer支持四种处理pdf标注的方式：

none：丢弃所有标注
image：将所有内容合并到光栅图像中
flatten：扁平化所有标注
annotation：以可编辑的形式保存标注。标记为扁平化的单个标注仍将被扁平化

我们可以使用flatten选项保存pdf文件来扁平化所有标注。

let blob = await doc.savetopdf({
  saveannotation: "flatten"
})

如果我们想在使某些标注扁平化的同时保留某些标注的可编辑性，我们可以使用标注的扁平化属性，并使用annotation选项保存pdf。

let annotations = dynamsoft.ddv.annotationmanager.getannotationsbydoc(doc.uid);
let annotation = annotations[0];
annotation.flattened = true;
let blob = await doc.savetopdf({
  saveannotation: "annotation"
})

内部是如何运作的

pdf文件使用postscript语言描述。我们将使用一些示例来展示扁平化的内部操作细节。

pdf文件会包含许多字典，下面是一个页面字典的示例：

4 0 obj
<<
  /type/page                 % specifies that this dictionary defines a page.
  /annots[ 8 0 r ]           % a list of references to annotation objects on this page.
  /contents 7 0 r            % reference to page content stream.
  /mediabox[ 0 0 147 143.25] % page dimensions.
  % other page properties
>>
endobj
7 0 obj
<</filter/flatedecode/length 44>>stream
x??41w0 bcc=#s039椝 ?j缫w媹0tp蒞? 卵	
endstream
endobj

以上页面引用了以下标注字典：

8 0 obj
<<
  /type/annot
  /ap<<
  /contents(annotation)
    /creationdate(d:20241227135119+08'00')
    /da(0.9411764705882353 0.07450980392156863 0.0784313725490196 rg /helvetica 16 tf)
    /ds(font:  'helvetica' 16pt; text-align:left; color:#f01314)
    /f 4
    /it/freetexttypewriter/m(d:20241227135125+08'00')/nm(m56c4eb9uq)/rc(<?xml version="1.0"?><body xmlns="http://www.w3.org/1999/xhtml" xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/" xfa:apiversion="acrobat:18.11.0" xfa:spec="2.0.2" style="font-size:16pt;text-align:left;color:#f01314;font-weight:normal;font-style:normal;font-family:'helvetica';font-stretch:normal;"><p dir="ltr"><span>annotation</span></p></body>)
    /rect[ 22.1854 112.467 98.423 129.217]
    /subj()
    /subtype
    /freetext
    /t()
>>
endobj

扁平化后，页面字典将变为以下内容。它不再具有标注节点，并将转换成图形的标注的节点附加到其正文中。

4 0 obj
<<
  /type/page
  /contents 13 0 r
  /mediabox[ 0 0 147 143.25]
>>
endobj
7 0 obj
<</filter/flatedecode/length 48>>stream
x???41w0 bcc=#s039椝 ?j缫w媹0tp蒞溻
 靔	?
endstream
endobj
13 0 obj
[ 7 0 r  14 0 r ]
endobj
14 0 obj
<</filter/flatedecode/length 29>>stream
x?t0t0 b櫆珷镦b犩挴 m+?
endstream
endobj

以上就是使用javascript将pdf页面中的标注扁平化的操作指南的详细内容，更多关于javascript pdf标注扁平化的资料请关注代码网其它相关文章！