PDF文档经常被用来共享发票、合同、报告、法律文件、客户资料、财务报表以及内部业务文件。但在这些文档被分享之前，其中可能包含一些接收者不应看到的信息。
例如，一张发票上可能会标注账户号码；客户资料中可能包含家庭地址或电话号码；法律文件可能会泄露机密的案件信息，而内部报告则可能包含仅供员工使用的姓名、参考资料或业务数据。
这时，PDF文档的遮盖功能就显得非常有用了。
通过使用遮盖功能，用户可以选中文档中敏感的内容区域，并在创建新的PDF文件之前永久性地隐藏这些区域。一个实用的遮盖工具还应该支持多区域遮盖、页面选择、文档预览以及最终输出结果的验证等功能。
在本教程中，你将学习如何使用JavaScript开发一款基于浏览器的PDF遮盖工具。用户可以上传PDF文件，浏览其中的页面，在文档预览界面直接标注需要遮盖的区域，管理多个遮盖操作，将这些设置应用到选定的页面上，预览处理后的文档，重新命名最终生成的文件，然后下载经过遮盖处理的PDF文件。
整个处理流程都是在浏览器中完成的。对于那些注重保护用户隐私的文档处理工具来说，这一点尤其重要，因为PDF文件的加工可以在本地完成，而无需依赖后端服务器。
通过学习本教程，你不仅会掌握如何标注需要遮盖的区域，还会了解如何将浏览器中的坐标系统转换为PDF文件中的坐标系统，并将这些选定的区域应用到实际的文档中。
目录
编辑内容与绘制黑色框的效果是不同的
一个常见的错误是认为，在文本上覆盖一个黑色矩形就能自动保护其中的信息。
从视觉上看，文档似乎已经被进行了编辑处理。但根据PDF文件被修改的方式不同，原始的文字或图像内容可能仍然存在于那个黑色矩形下面。
例如，如果在账号号码上方添加一个黑色框作为新的注释层，那么这个编号在页面上虽然看不见了，但底层的PDF内容依然存在。
在一些编辑处理不当的文档中，用户仍然可以选中、复制、搜索或恢复那些被隐藏的内容。
因此，编辑操作必须与简单的视觉装饰区分开来。
在我们的基于浏览器的处理流程中，选中的区域会在生成处理后的PDF文件时被应用上去。在分享最终文件之前，应该仔细检查它是否正确。
千万不要以为仅仅加上一个黑色矩形就能确保底层PDF内容的安全性。对于涉及高安全性或法律敏感性的文档，应该通过专门的验证流程来确认最终文件的完整性。
基于浏览器的PDF编辑工作原理
编辑操作可以分为几个明确的步骤来完成。
首先，浏览器会读取上传的PDF文件并显示页面预览。这个预览界面可以让用户直观地识别出敏感信息所在的位置。
接下来，用户可以通过点击并拖动鼠标在预览界面上绘制黑色矩形来标记需要编辑的区域。
每个黑色矩形的坐标会被保存下来。
const redaction = {
page: 7,
x: 420,
y: 35,
width: 310,
height: 220
};
同一个页面可以有多个这样的编辑标记。
redactions.push(redaction);
当用户点击“应用并完成”按钮时，程序会判断哪些页面需要应用这些编辑标记。
随后，这些编辑坐标会被转换成实际的PDF页面坐标，程序会修改PDF文件并生成新的文档供用户预览和下载。
整个处理流程如下：
上传PDF文件
↓
显示页面预览
↓
绘制需要编辑的区域
↓
> 保存坐标信息
↓
> 选择目标页面
↓
> 应用编辑标记
↓
> 生成新的PDF文件
↓
> 预览并下载新文件
将用户界面与PDF处理逻辑分开设计，可以使程序更易于管理和调试。
理解PDF坐标与Canvas坐标的区别
在这个项目中，坐标转换是一个非常重要的技术环节。
在浏览器中显示的PDF页面通常会被缩放以适应屏幕的显示范围。例如，一个PDF页面的实际宽度可能是842个像素点，但在浏览器中显示时可能只有600像素宽。
这意味着，在预览界面中绘制在x = 300位置的矩形，无法直接被放置在PDF文件中同样的x = 300位置。
我们首先需要计算出比例尺的差异。
const scaleX =
pdfPageWidth / canvasWidth;
const scaleY =
pdfPageHeight / canvasHeight;
选中的矩形就可以进行转换了。
const pdfX =
redaction.x * scaleX;
const pdfWidth =
redaction.width * scaleX;
const pdfHeight =
redaction.height * scaleY;
对于Y坐标来说，需要特别注意，因为浏览器中的canvas和PDF页面通常使用不同的坐标原点。
Canvas的坐标系一般以左上角为原点，而PDF的坐标系则以左下角为原点。
因此，Y坐标的转换方法如下：
const pdfY =
pdfPageHeight -
((redaction.y + redaction.height) * scaleY);
这种简单的计算步骤其实非常重要。
如果坐标转换不正确，那么在电话号码上绘制的标注框，在生成的PDF文件中可能会显示在距离该号码几厘米远的位置。
准确的坐标映射能够确保用户在浏览器中进行的标注操作，与最终文档中的对应区域完全吻合。
项目设置
由于整个编辑流程都是在浏览器中完成的，因此我们会保持项目结构的简洁性。
创建一个包含三个文件的新项目文件夹：
pdf-redaction-tool/
│
├── index.html
├ ├── style.css
└── script.js
index.html文件包含了上传界面、PDF预览功能、编辑控件以及最终下载选项。
style.css文件负责处理页面布局以及编辑标注区域的样式设计。
script.js文件则包含了PDF文件的加载与渲染逻辑、坐标跟踪机制、编辑管理功能，以及最终的PDF生成过程。
我们先从基础的HTML结构开始编写代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
PDF编辑工具
<body>
</section>
</section>