@freeCodeCamp：PDF 文件常包含敏感信息，分享前需要隐藏。在本教程中，@allinonetools 将向您展示如何……

PDF 通常包含需要在分享前隐藏的敏感信息。在本教程中，@allinonetools 将向你展示如何使用 JavaScript 构建一个基于浏览器的 PDF 模糊工具。你将使用 PDF.js、Canvas 和 PDF-lib 来选择和模糊内容、预览结果并生成新的 PDF，所有操作均在浏览器内完成。https://freecodecamp.org/news/build-pdf-blur-tool-javascript/… — # 如何使用 JavaScript 构建基于浏览器的 PDF 模糊工具 来源：https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/ 许多 PDF 文档包含不应公开分享的信息。在向他人发送文件之前，通常需要隐藏个人详细信息、财务数据、签名、地址、账号、员工信息或机密商业数据。PDF 模糊工具让这一过程变得简单。它并非永久删除内容，而是在 PDF 的选定区域上应用模糊效果，使敏感信息难以辨认，同时文档其余部分保持不变。 在本教程中，你将使用 JavaScript 构建一个基于浏览器的 PDF 模糊工具。用户将能够上传 PDF、预览每一页、在敏感内容上绘制模糊框、调整模糊强度、将模糊应用于选定页面、预览最终结果并下载处理后的 PDF，所有操作无需将文件上传到服务器。我们将使用 PDF.js 在浏览器内渲染 PDF 页面，使用 HTML Canvas 创建和管理模糊区域，并使用 PDF-lib 生成最终的模糊 PDF。 在本教程结束时，你将拥有一个功能完整的客户端 PDF 编辑工具，类似于我在 my site, AllInOneTools 上提供的工具。 allinonetools - pdf 工具 - 模糊 pdf 文档## 目录 - 此 PDF 模糊工具的功能及工作原理 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-what-this-pdf-blur-tool-does-and-how-it-works) - 项目设置 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-project-setup) - 创建 HTML 布局 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-creating-the-html-layout) - 上传和预览 PDF (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-uploading-and-previewing-pdfs) - 创建模糊区域 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-creating-blur-regions) - 将模糊应用于页面 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-applying-blur-to-pages) - 生成最终 PDF (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-generating-the-final-pdf) - 预览结果 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-previewing-the-result) - 重命名和下载 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-renaming-and-downloading) - 演示：PDF 模糊工具的工作原理 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-demo-how-the-pdf-blur-tool-works) - 性能提示 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-performance-tips) - 常见错误 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-common-mistakes) - 结论 (https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/#heading-conclusion) PDF 模糊工具有助于在文档分享前保护敏感信息。它不是编辑或删除原始内容，而是在选定区域上应用视觉模糊效果，使机密信息无法辨认，同时文档其余部分保持不变。这种方法适用于隐藏个人详细信息、财务信息、账号、签名、地址、人脸或任何其他不应在最终文档中可见的私人内容。 在此项目中，用户可以直接从浏览器上传 PDF，预览每一页，并在要隐藏的区域上绘制一个或多个模糊区域。该工具还允许用户调整模糊强度、模糊选定区域或整个页面、将效果应用于当前页面、所有页面或特定页面范围、预览完成后的文档、重命名输出文件并下载最终 PDF。由于所有操作都在浏览器内运行，因此不会将文件上传到服务器，有助于维护文档隐私。 在幕后，应用程序首先使用 PDF.js 将每个 PDF 页面渲染到 HTML Canvas 上。它不会立即修改原始 PDF，而是记录用户创建的每个模糊区域的位置、大小、页码和模糊强度。当用户点击“应用并最终确定“时，这些存储的区域将从浏览器坐标转换为实际的 PDF 页面坐标。然后，选定的模糊效果被应用于渲染的页面，PDF-lib 生成包含模糊内容的新 PDF，同时保留文档的其余部分。此工作流程提供了交互式编辑体验，同时在生成最终文档之前保持原始 PDF 不变。 例如，每个模糊区域可以表示为如下对象： const blurRegion = { page: 2, x: 180, y: 240, width: 260, height: 90, intensity: 6 }; 每个对象存储了在最终 PDF 生成过程中重新创建模糊效果所需的所有信息。 ## 项目设置 在编写任何代码之前，先为我们的 PDF 模糊工具创建一个简单的项目结构。我们将使用纯 HTML、CSS 和 JavaScript，以及两个库： - PDF.js 用于在浏览器内渲染 PDF 页面。 - PDF-lib 用于生成最终的模糊 PDF。 我们的项目结构如下： pdf-blur-tool/ │── index.html │── style.css │── script.js │── pdf.worker.min.js │── assets/ 保持项目简单有助于理解每个部分的工作原理。 在加载你自己的 JavaScript 之前，先添加 PDF.js 和 PDF-lib。 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script> 配置 PDF 工作线程。 pdfjsLib.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js"; 工作线程在后台线程中处理 PDF 渲染，有助于在页面渲染时保持界面响应。 ## 创建 HTML 布局 应用程序包含四个主要部分： - 上传区域 - PDF 预览 - 模糊设置面板 - 最终下载部分 创建基本布局： <div id="uploadSection"> <h2>上传 PDF</h2> <input type="file" id="pdfInput" accept=".pdf" /> <p>或将文件拖放到此处</p> </div> <div id="editorSection" hidden> <canvas id="pdfCanvas"></canvas> <div id="controls"> <button id="previousBtn">上一页</button> <span id="pageIndicator">第 1 页，共 1 页</span> <button id="nextBtn">下一页</button> </div> <div id="blurSettings"> <label>模糊强度：<input type="range" id="blurIntensity" min="1" max="20" value="6" /></label> <div id="blurMode"> <label><input type="radio" name="blurMode" value="selected" checked /> 模糊选定区域</label> <label><input type="radio" name="blurMode" value="whole" /> 模糊整页</label> </div> </div> <button id="applyBtn">应用并最终确定</button> </div> <div id="resultSection" hidden> <canvas id="resultCanvas"></canvas> <div> <input type="text" id="filenameInput" value="blurred.pdf" /> <button id="downloadBtn">下载</button> </div> </div> 初始状态下，仅上传部分可见。选择 PDF 后，编辑器部分变为可见。 ### 选择 DOM 元素 创建在整个应用程序中使用的元素引用。 const uploadSection = document.getElementById("uploadSection"); const editorSection = document.getElementById("editorSection"); const resultSection = document.getElementById("resultSection"); const fileInput = document.getElementById("pdfInput"); const pdfCanvas = document.getElementById("pdfCanvas"); const canvasContext = pdfCanvas.getContext("2d"); 这些引用允许应用程序在上传、编辑和下载阶段之间切换。 ## 上传和预览 PDF 上传部分同时支持拖放和传统文件选择。选择 PDF 后，先验证它确实是 PDF 文件，然后再继续。 async function handlePdfUpload(file) { if (!file || file.type !== "application/pdf") { alert("请选择一个 PDF 文件。"); return; } await loadPdf(file); } 如果验证成功，则将文档加载到内存中。 ### 读取 PDF 使用 File API 将上传的文件转换为 ArrayBuffer。 async function loadPdf(file) { const bytes = await file.arrayBuffer(); pdfDocument = await pdfjsLib .getDocument({ data: bytes }) .promise; currentPage = 1; await renderPage(currentPage); } 上传的字节稍后将在生成模糊 PDF 时重复使用。 ### 渲染第一页 PDF.js 将每个页面渲染到 HTML Canvas 上。首先检索请求的页面。 async function renderPage(pageNumber) { const page = await pdfDocument.getPage(pageNumber); const viewport = page.getViewport({ scale: 1.5 }); 调整 Canvas 大小以匹配页面尺寸。 pdfCanvas.width = viewport.width; pdfCanvas.height = viewport.height; 渲染页面。 await page.render({ canvasContext, viewport }).promise; 渲染完成后，PDF 页面在编辑器中可见。 上传的 PDF 显示在预览区域中，带有页面导航控件。 ### 创建页面导航 大多数 PDF 文档包含多个页面。允许用户使用“上一页“和“下一页“按钮在页面之间移动。 let currentPage = 1; let pdfDocument = null; 移动到上一页。 previousButton.addEventListener("click", async () => { if (currentPage === 1) { return; } currentPage--; await renderPage(currentPage); }); 移动到下一页。 nextButton.addEventListener("click", async () => { if (currentPage === pdfDocument.numPages) { return; } currentPage++; await renderPage(currentPage); }); 当当前页面更改时更新页面计数器。 pageIndicator.textContent = `第 ${currentPage} 页，共 ${pdfDocument.numPages} 页`; 这为用户在浏览大型 PDF 文档时提供了清晰的反馈。 PDF 预览，带有用于在页面之间导航的“上一页“和“下一页“按钮。 ### 为模糊编辑做准备 渲染当前页面后，应用程序在 PDF Canvas 上方准备一个透明层。此覆盖层捕获鼠标交互，而无需修改原始页面预览。 创建覆盖层。 <canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0;"></canvas> 使其大小与 PDF 预览匹配。 overlayCanvas.width = pdfCanvas.width; overlayCanvas.height = pdfCanvas.height; 在本教程的后面部分，此覆盖层将允许用户绘制模糊区域，同时保持底层 PDF 页面不变。 ### 显示编辑器 第一页渲染完成后，从上传屏幕切换到编辑器界面。 uploadSection.hidden = true; editorSection.hidden = false; 用户现在可以预览文档、在页面之间导航，并开始选择应模糊的区域。 ## 创建模糊区域 现在 PDF 预览已正常工作，我们可以构建应用程序最重要的功能：允许用户模糊敏感信息。用户不是立即编辑 PDF，而是先在页面预览上绘制一个或多个模糊区域。每个区域存储自己的位置、大小和模糊强度。这些区域稍后将在最终处理期间转换为实际的 PDF 坐标。 ### 创建模糊区域对象 每个模糊区域表示为一个 JavaScript 对象。例如： const blurArea = { page: currentPage, x: 0, y: 0, width: 0, height: 0, intensity: 6 }; 应用程序不会立即修改 PDF，而是仅跟踪这些对象，直到用户点击“应用并最终确定“。 ### 存储多个模糊区域 用户通常需要隐藏多条信息。将所有模糊区域存储在一个数组中。 const blurAreas = []; 每当创建新的模糊框时，将其推入数组。 blurAreas.push({ page: currentPage, x, y, width, height, intensity: blurIntensity }); 这使得以后可以轻松地重新绘制、编辑或删除单个模糊区域。 ### 开始模糊选择 透明覆盖层 Canvas 捕获鼠标交互。当用户按下鼠标按钮时，记录起始位置。 let isDrawing = false; let startX = 0; let startY = 0; overlayCanvas.addEventListener("mousedown", event => { isDrawing = true; startX = event.offsetX; startY = event.offsetY; }); 模糊矩形从此点开始。 ### 绘制模糊矩形 随着鼠标移动，更新矩形尺寸。 overlayCanvas.addEventListener("mousemove", event => { if (!isDrawing) { return; } drawPreviewBox(startX, startY, event.offsetX, event.offsetY); }); 用户拖动鼠标时，预览会不断更新。 ### 完成选择 当释放鼠标按钮时，保存完成的模糊区域。 overlayCanvas.addEventListener("mouseup", event => { isDrawing = false; blurAreas.push({ page: currentPage, x: startX, y: startY, width: event.offsetX - startX, height: event.offsetY - startY, intensity: blurIntensity }); redrawBlurAreas(); updateBlurList(); }); 每个模糊区域成为当前编辑会话的一部分。 用户在 PDF 预览中拖动模糊矩形覆盖敏感信息。 ### 绘制现有模糊区域 每当页面更改或添加模糊区域时，重新绘制每个模糊框。 function redrawBlurAreas() { overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height); blurAreas .filter(area => area.page === currentPage) .forEach(drawBlurArea); } 这确保先前创建的模糊区域在编辑时仍然可见。 ### 显示模糊框 使用虚线轮廓渲染每个存储的区域。 function drawBlurArea(area) { overlayContext.setLineDash([6, 4]); overlayContext.strokeStyle = "#4f6cff"; overlayContext.strokeRect(area.x, area.y, area.width, area.height); } 轮廓作为指导，不会成为最终 PDF 的一部分。 ### 模糊选项 用户可以选择如何应用模糊。该工具支持两种模式： - 模糊选定区域 - 模糊整个页面 选定的选项控制编辑行为。 const blurMode = document.querySelector('input[name="blurMode"]:checked').value; 如果选择了“模糊选定区域“，用户手动绘制模糊矩形。如果选择了“模糊整个页面“，应用程序将跳过手动选择，并准备在最终处理期间模糊整个页面。 模糊选项显示用于模糊选定区域或整个 PDF 页面的选择。 ### 调整模糊强度 不同的文档需要不同级别的模糊。滑块允许用户在执行效果前控制模糊强度。 const blurSlider = document.getElementById("blurIntensity"); let blurIntensity = 6; blurSlider.addEventListener("input", event => { blurIntensity = Number(event.target.value); }); 选定的值与每个新创建的模糊区域一起存储。 blurArea.intensity = blurIntensity; 较高的值产生更强的模糊效果。 模糊强度滑块允许用户调整模糊效果的强度。 ## 管理多个模糊区域 许多文档包含多条机密信息。应用程序不是限制用户只能使用一个模糊矩形，而是显示所有保存的区域。例如： 模糊区域 #1 模糊区域 #2 模糊区域 #3 每个条目包含一个删除按钮。 function removeBlurArea(index) { blurAreas.splice(index, 1); redrawBlurAreas(); updateBlurList(); } 这允许用户只删除不再需要的模糊区域。 要删除当前页面的所有模糊区域： function clearCurrentPage() { const remaining = blurAreas.filter(area => area.page !== currentPage); blurAreas.length = 0; blurAreas.push(...remaining); redrawBlurAreas(); } 模糊区域管理器显示多个模糊区域，带有删除控件和“清除此页所有区域“按钮。 ## 将模糊应用于页面 用户可能只想模糊文档中的一个页面或多个页面。编辑器提供了三个选项： - 仅当前页面 - 所有页面 - 特定页面 const pageOption = document.querySelector('input[name="pageOption"]:checked').value; 如果用户选择了“特定页面“，他们可以输入如下值： 1, 3-5, 8 这些值稍后将在生成最终 PDF 之前转换为页码数组。 应用于页面部分，包含“当前页面“、“所有页面“和“特定页面“选项。 ### 应用模糊效果 到目前为止，用户已上传 PDF、选择一个或多个模糊区域、调整模糊强度并选择应处理的页面。最后一步是将这些模糊区域转换为生成的 PDF 中的实际模糊内容。这不是修改原始 PDF，而是使用新的模糊页面创建一个新文档。 当用户点击“应用并最终确定“时，应用程序： 1. 获取原始 PDF 字节。 2. 使用 PDF-lib 加载它们。 3. 遍历每一页。 4. 对于每一页，渲染页面，将模糊效果应用于存储的区域，然后将修改后的页面嵌入到新 PDF 中。 5. 保存并提供新 PDF 供下载。 async function applyBlurAndFinalize() { const pdfBytes = await file.arrayBuffer(); const pdfDoc = await PDFLib.PDFDocument.load(pdfBytes); for (let i = 0; i < pdfDoc.getPageCount(); i++) { const page = pdfDoc.getPage(i); const pageNumber = i + 1; const blurRegionsForPage = blurAreas.filter(area => area.page === pageNumber); if (blurRegionsForPage.length === 0) continue; // 渲染页面，应用模糊，并使用 PDF-lib 将其嵌入为新页面 // ... } const modifiedPdfBytes = await pdfDoc.save(); // 显示下载选项 } 此过程确保原始 PDF 保持不变，直到创建最终输出。 应用模糊并生成新的 PDF 文件。 ## 预览结果 在下载之前，用户应能够看到最终 PDF 的样子。应用程序在第二个 Canvas 中显示已应用模糊的页面预览。 async function previewResult() { const pdfBytes = await file.arrayBuffer(); // 使用 PDF-lib 应用模糊并获取新字节 const modifiedPdfBytes = await applyBlurAndFinalize(); // 使用 PDF.js 渲染第一页以进行预览 const pdfDoc = await pdfjsLib.getDocument({ data: modifiedPdfBytes }).promise; const page = await pdfDoc.getPage(1); const viewport = page.getViewport({ scale: 1.5 }); resultCanvas.width = viewport.width; resultCanvas.height = viewport.height; await page.render({ canvasContext: resultCanvas.getContext("2d"), viewport }).promise; resultSection.hidden = false; } 这为用户提供了在下载前验证模糊效果的方法。 最终 PDF 的预览，显示已应用的模糊效果。 ## 重命名和下载 应用程序允许用户自定义输出文件名。 <input type="text" id="filenameInput" value="blurred.pdf" /> <button id="downloadBtn">下载</button> 下载功能： document.getElementById("downloadBtn").addEventListener("click", async () => { const filename = document.getElementById("filenameInput").value || "blurred.pdf"; const modifiedPdfBytes = await applyBlurAndFinalize(); const blob = new Blob([modifiedPdfBytes], { type: "application/pdf" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); }); 这提供了一个流畅的下载体验，无需服务器端处理。 ## 演示：PDF 模糊工具的工作原理 以下是该工具工作原理的简要概述： 1. 上传 PDF。 2. 在要隐藏的敏感信息上绘制模糊框。 3. 调整模糊强度。 4. 选择要处理的页面。 5. 点击“应用并最终确定”。 6. 预览结果。 7. 重命名并下载。 具有拖放上传区域的完整 PDF 模糊工具界面。 ## 性能提示 处理大型 PDF 文件时，请记住以下提示： - 使用工作线程进行 PDF.js 渲染以保持界面响应。 - 限制一次渲染的页面数量。 - 对于非常大的文档，考虑分批处理模糊区域。 - 使用 requestAnimationFrame 进行 Canvas 绘制以优化性能。 ## 常见错误 避免这些常见陷阱： - 忘记在最终 PDF 生成中转换坐标。浏览器坐标与 PDF 坐标不同。 - 未正确处理页面范围。在处理之前验证用户输入。 - 假设所有 PDF 页面具有相同的尺寸。 - 在应用模糊之前未保存原始 PDF 字节。 ## 结论 你已经使用 JavaScript 成功构建了一个功能完整的基于浏览器的 PDF 模糊工具。用户现在可以直接在浏览器中上传 PDF、预览页面、绘制模糊区域、调整强度并下载处理后的文档，而无需将文件上传到任何服务器。此方法使用 PDF.js 进行渲染、使用 Canvas 进行覆盖交互，并使用 PDF-lib 进行生成。 尝试使用你自己的 PDF 文件并探索改进机会。你可能会添加功能，例如保存模糊区域配置以供以后使用、支持更多模糊形状，或者添加协作功能。这些扩展将使你的工具更加强大和用户友好。 如果您觉得本教程有帮助，请查看我的网站 AllInOneTools 上的其他工具，或在此处联系我以获取反馈和功能请求。