如何使用JavaScript构建基于浏览器的PDF过滤工具开发环境

PDF编辑并不仅限于添加签名或合并文档。有时，你只是想通过增加亮度、提升对比度、添加模糊效果、将其转换为灰度图，或者应用一些创意视觉效果来改善PDF的外观——而这一切都不需要打开Photoshop或安装任何桌面软件。

在这个教程中，你将使用JavaScript、PDF.js、Canvas API以及PDF-lib构建一个基于浏览器的PDF过滤器工具。用户可以上传PDF文件，预览每一页，叠加多个过滤层，应用预设效果，处理选定的页面，预览最终结果，重新命名文件，然后直接从浏览器中下载编辑后的PDF。

由于所有操作都在用户的设备上本地进行，因此上传的PDF文件永远不会离开用户的设备，这使得这个工具既快速又非常注重用户隐私。

目录

• 这个PDF过滤器工具的功能及工作原理

• 为什么要构建这样一个PDF过滤器工具？

• 项目设置

• 所使用的库

• 创建HTML布局

• 上传和预览PDF文件

• 构建过滤层

• 将过滤器应用于PDF页面

• 应用预设效果

• 生成最终的PDF文件

• 预览结果

• 重新命名文件并下载

• 演示：这个PDF过滤器工具的工作原理

• 性能优化技巧

• 常见错误

• 总结

这个PDF过滤器工具的功能及工作原理

与那些只能执行单一操作的工具不同，这个PDF过滤器工具允许用户在生成新的PDF文件之前，对图像进行多种调整。

在上传文档后，每一页都会通过PDF.js在浏览器中呈现出来，并显示在预览窗口中。用户可以创建一个或多个过滤层，调整亮度、对比度、饱和度、模糊程度、不透明度、灰度级别、棕褐色效果、颜色反转或色调旋转等参数，然后立即看到这些设置对文档产生的影响。

对于那些不愿意手动进行各种设置的用户，该应用程序还提供了诸如灰度、棕褐色效果、反转效果、锐化效果、发光效果以及晕影效果等预设选项。一旦用户获得了自己想要的效果，所选滤镜就会被应用到相应的页面上；随后，PDF-lib会生成新的PDF文件，用户可以直接查看这份完成的文档、为其重新命名，甚至直接下载它，而无需将任何文件上传到服务器上。

这种工作流程为人们提供了一种灵活的方式，可以在浏览器中直接优化报告、演示文稿、扫描文档、营销材料以及图片含量较多的PDF文件。

为什么要开发这个PDF过滤器工具？

大多数在线PDF编辑器主要关注对文档的结构进行修改，比如合并、分割、旋转或压缩文件。但很少有工具允许用户使用可调节的图像滤镜来改善PDF页面的视觉效果。

基于浏览器的PDF过滤器工具通过将文档处理与图像编辑功能结合在一起，填补了这一空白。用户无需将PDF页面导出到图像编辑软件中，再应用各种效果后再重新生成文档，而是可以在一个地方完成整个处理流程。

开发这个项目也是学习一些重要的Web开发概念的绝佳机会，这些概念包括使用PDF.js渲染PDF页面、利用Canvas API处理图像、创建可重复使用的滤镜处理流程、管理多个滤镜层、操作动态用户界面，以及使用PDF-lib生成新的PDF文件。

由于所有操作都在浏览器内部完成，因此文档内容能够保持私密性，同时还能提供快速的性能，并且完全不需要安装额外的软件。

项目设置

创建一个具有以下结构的项目文件夹：

pdf-filter-studio/
│── index.html
│── style.css
│── script.js
│── assets/

这个项目的设计初衷就是保持简单性。

• index.html负责构建应用程序的用户界面。

• style.css用于控制页面的布局和外观效果。

• script.js负责处理PDF文件的渲染、滤镜效果的应用以及PDF文件的生成工作。

• assets用来存储应用程序所需的图标或其他资源文件。

当文件夹结构准备好后，我们将会导入所需的库文件，构建文件上传功能，实现PDF页面的渲染，并开始开发滤镜系统。

所使用的库

这个PDF过滤器工具结合了三种浏览器技术，用于上传PDF文件、渲染页面、应用多种视觉效果滤镜，并最终生成可下载的新PDF文件。

PDF.js负责在浏览器中渲染PDF页面。

Canvas API能够直接对每个已渲染的页面应用亮度、对比度、模糊、饱和度、灰度、棕褐色、反转、不透明度以及色调旋转等滤镜效果。

最后，PDF-lib会在所有选定的页面处理完成后生成最终的编辑结果PDF文件。

在加载JavaScript代码之前，请先引入所需的库文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.min.js"></script>
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
<script src="script.js"></script>

配置PDF.js工作线程。

pdfjsLib.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js";

使用工作线程可以在JavaScript继续处理用户界面时确保渲染过程顺畅进行。

创建HTML布局

该应用程序分为四个部分：

• 上传区域

• PDF预览区

• 筛选面板

• 下载区域

首先创建基本的结构。

<section id="uploadSection"></section>
<section id="previewSection" hidden></section>
<section id="filterSection" hidden></section>
<section id="downloadSection" hidden></section>

最初只有上传区域是可见的。一旦选择了PDF文件，其余部分就会自动显示出来。

选择DOM元素

在应用程序中保存对这些元素的引用。

const uploadSection = document.getElementById("uploadSection");
const previewCanvas = document.getElementById("previewCanvas");
const previousButton = document.getElementById("previousPage");
const nextButton = document.getElementById("nextPage");
const rotateLeftButton = document.getElementById("rotateLeft");
const rotateRightButton = document.getElementById("rotateRight");

在脚本的开头就保存这些引用，可以使后续的代码更加清晰、更易于维护。

上传和预览PDF文件

上传区域支持拖放操作以及手动选择文件。

在加载文档之前，需要确认所选的文件确实是PDF格式。

async function uploadPdf(file) {
    if (!file || file.type !== "application/pdf") {
        alert("请选择PDF文件。");
        return;
    }

    await loadPdf(file);
}

验证通过后，文档就会被加载到内存中。

加载PDF文件

在用PDF.js打开文件之前，需要先将上传的文件转换为ArrayBuffer格式。

async function loadPdf(file) {
    const bytes = await file.arrayBuffer();
    pdfDocument = await pdfjsLib.getDocument({
        data: bytes
    }).promise;

    currentPage = 1;
    renderPage(currentPage);
}

文档成功加载后，系统会自动显示第一页。

渲染PDF页面

每一页内容都会被渲染到一张HTML画布上。

获取选中的页面。

const page = await pdfDocument.getPage(currentPage);

创建一个视口。

const viewport = page.getViewport({
    scale: 1.5
});

调整画布的大小。

previewCanvas.width = viewport.width;
previewCanvas.height = viewport.height;

渲染页面内容。

await page.render({
    canvasContext: previewCanvas.getContext("2d"),
    viewport
}).promise;

现在，每一页的显示效果都与原始PDF文件中的样子完全一致。

在页面之间导航

大多数PDF文件都包含多页内容，因此用户需要简单的导航工具。

保存当前页面的位置。

let currentPage = 1;
let pdfDocument = null;

切换到上一页。

previousButton.addEventListener("click", async () => {
    if (currentPage > 1) {
        currentPage--;
        await renderPage(currentPage);
    }
});

切换到下一页。

nextButton.addEventListener("click", async () => {
    if (currentPage < pdfDocument.numPages) {
        currentPage++;
        await renderPage(currentPage);
    }
});

更新页面编号。

pageIndicator.textContent = `当前页码：${currentPage}，总页数：${pdfDocument.numPages}`;

现在用户可以在应用过滤功能之前先浏览整个文档内容。

旋转预览视图

该应用程序还提供了预览视图的旋转功能。这种旋转仅影响预览效果，让用户能够在应用过滤条件之前从不同角度查看页面内容。

保存当前的旋转角度。

let rotation = 0;

向左旋转。

rotateLeftButton.addEventListener("click", () => {
    rotation -= 90;
    renderPage(currentPage);
});

向右旋转。

rotateRightButton.addEventListener("click", () => {
    rotation += 90;
    renderPage(currentPage);
});

在创建视口时设置旋转角度。

const viewport = page.getViewport({
    scale: 1.5,
    rotation
});

这些功能改进了预览体验，而且不会修改原始PDF文件的内容。

构建过滤面板

“滤镜面板”是PDF Filter Studio的核心组件。用户无需应用单一效果，而是可以叠加多个滤镜层，结合多种调整选项，并在生成最终PDF文件之前预览结果。

每个滤镜层代表一种图像调整方式，例如亮度、对比度、饱和度、模糊效果、不透明度、灰度转换、棕褐色处理、颜色反转或色调旋转等。

用户还可以一键使用预设的效果，比如灰度化、棕褐色处理、负片效果、锐化、发光效果或暗角调整。

创建滤镜层

我们不会将所有调整参数硬编码在代码中，而是将这些滤镜存储在一个数组中。

const filters = [];

每个滤镜都包含其类型和具体数值。

filters.push({
    type: "brightness",
    value: 120
});

采用这种结构，用户可以以任意顺序组合多个滤镜。

添加新的滤镜层

首先，用户从下拉菜单中选择所需的滤镜，然后点击“添加”按钮。

下面是创建下拉菜单的代码示例：

<select id="filterType">
    <option>>亮度对比度饱和度模糊效果不透明度灰度转换棕褐色处理颜色反转
    色调旋转
</select>

选中的滤镜会被添加到系统中。

addButton.addEventListener("click", () => {
    filters.push({
        type: filterType.value,
        value: 100
    });

    renderFilters();
});

每个新添加的滤镜都会立即显示在“滤镜层”面板中。

显示滤镜层

每当有新的滤镜被添加时，系统会重新生成滤镜列表。

function renderFilters() {
    filterContainer.innerHTML = "";

    filters.forEach(createFilterCard);
}

每个滤镜卡片包含以下内容：

• 滤镜名称

• 数值调节滑块

• 当前设置值

• 删除按钮

这种设计使得用户能够轻松管理多种调整选项。

更新滤镜值

每一层都配有自己的滑动调节器。

以“亮度”为例：

slider.addEventListener("input", event => {
    filter.value = Number(event.target.value);
    updatePreview();
});

每当滑动调节器的值发生变化时，预览图像会立即更新。

所有类型的滤镜都采用相同的逻辑来实现这一功能。

支持多种滤镜类型

不同的滤镜使用不同的数值范围。

const ranges = {
    brightness: [0, 200],
    contrast: [0, 200],
    saturation: [0, 200],
    blur: [0, 20],
    opacity: [0, 100],
    grayscale: [0, 100],
    sepia: [0, 100],
    invert: [0, 100],
    hue: [0, 360]
};

这样，用户在进行任何调整时都能使用最合适的数值。

预设效果

有些用户更喜欢通过一键操作来应用效果，而不是手动创建滤镜层。

该应用程序提供了多个预设选项。

<button>>灰度模式</button>
棕褐色模式</button>
反转颜色</button>
锐化图像</button>>
发光效果</button>>
暗角处理</button>

每个预设选项都会自动创建一个或多个滤镜层。

以“灰度模式”为例：

function grayscalePreset() {
    filters.length = 0;

    filters.push({
        type: "grayscale",
        value: 100
    });

    updatePreview();
}

用户之后仍然可以编辑这些自动生成的滤镜层。

将滤镜应用于特定页面

并不是每个页面都需要相同的处理效果。用户可以自行选择在哪些页面上应用滤镜。

首先创建页面选项设置。

<input type="radio" name="pages" value="current" checked>
仅当前页面

然后获取用户选择的选项。

const pageMode = document.querySelector('input[name="pages"]:checked').value;

如果用户选择了“特定页面”，就需要读取所选页面的范围。

const pageRange = document.getElementById("pageRange").value;

这样，用户就可以只修改选中的页面，而保持其他页面不变。

删除过滤层

用户可以在处理之前删除任何过滤层。

需要创建一个用于删除过滤层的函数。

function removeFilter(index) {
    filters.splice(index, 1);
    renderFilters();
    updatePreview();
}

删除某个过滤层后，预览效果会立即更新。这样一来，用户就可以快速而直观地尝试不同的过滤组合。

将过滤层应用到PDF页面上

现在，是时候处理上传的PDF文件了。

当用户完成过滤层的配置后，该应用程序会将每页选中的内容渲染到HTML画布上，按顺序应用所配置的过滤效果，然后使用PDF-lib生成新的PDF文件。

与之前那些只应用一种效果的程序不同，这个Filter Studio支持多个过滤层，用户可以据此构建自己的图像处理流程。

构建画布过滤字符串

HTML画布API允许将多个过滤效果组合成一条过滤字符串。

首先创建一个空字符串。

let filterString = "";

遍历所有的过滤层，将它们依次添加到过滤字符串中。

filters.forEach(filter => {
    filterString += `${filter.type}
(${filter.value})
`;
});

最后将生成的过滤字符串赋值给相应的属性。

context.filter = filterString.trim();

在渲染页面之前，所有激活的过滤效果都会被合并在一起。

绘制经过处理的页面

一旦过滤字符串生成完成，就需要重新绘制页面内容。

context.drawImage(pdfCanvas, 0, 0);

此时，画布上显示的就是已经过处理后的页面效果。

这种处理方式使得用户可以在一次渲染过程中应用多种调整效果。

应用多个过滤层

由于所有的过滤设置都存储在filters数组中，用户可以随意组合这些效果。

例如：

filters = [
    {
        type: "brightness",
        value: "130%"
    },
    {
        type: "contrast",
        value: "115%"
    },
    {
        type: "blur",
        value: "5px"
    }
];

这些过滤效果在渲染之前会自动被合并成一条画布过滤字符串。

这样的设计既提高了应用程序的灵活性，又使代码保持简洁明了。

应用预设效果

使用预设按钮，就可以将当前的过滤设置替换为预先定义好的效果。

以“棕褐色”预设为例：

filters = [
    {
        type: "sepia",
        value: "100%"
    }
];

updatePreview();

同样，“发光”预设效果也可以同时结合亮度调整和模糊处理。

filters = [
    {
        type: "brightness",
        value: "125%"
    },
    {
        type: "blur",
        value: "2px"
    }
];

预设效果能够节省用户的操作时间，同时用户之后仍可以对其进行手动调整。

处理选定的页面

一旦过滤设置完成，就只处理用户所选中的那些页面。

for (const page of selectedPages) {
    await processPage(page);
}

如果选择了“仅当前页面”选项，那么只有当前激活的页面才会被处理。

如果选择了“所有页面”选项，程序会遍历文档中的所有页面进行处理。

如果用户指定了具体的页码，那么系统只会过滤这些指定的页面。

应用过滤器

用户首先需要点击“将过滤器应用于PDF文件”按钮来开始处理流程。

创建这个操作按钮。

<button id="applyFilters">>将过滤器应用于PDF文件</button>

然后就开始执行处理任务了。

apply Filters.addEventListener("click", async () => {
    await generatePdf();
});

在处理过程中，系统会显示一个加载指示器，让用户知道程序正在运行中。

生成最终的PDF文件

首先创建一个新的PDF文档。

const outputPdf = await PDFLib.PDFDocument.create();

然后将经过处理的图像转换成PDF格式的图片文件。

const imageBytes = await canvasToBytes(previewCanvas);

最后将这个图片嵌入到新的PDF文档中。

const image = await outputPdf.embedPng(imageBytes);

接下来创建一个新的页面，并将处理后的图像放置在该页面上。

const page = outputPdf.addPage([
    image.width,
    image.height
]);

最后绘制这个处理后的图像即可。

page.drawImage(image, {
    x: 0,
    y: 0,
    width: image.width,
    height: image.height
});

重复这个过程，直到所有选定的页面都被添加到新的PDF文件中。

保存PDF文件

当所有页面都处理完成后，就保存这份完成的PDF文档吧。

const pdfBytes = await outputPdf.save();

生成可供下载的文件。

generatedPdf = new Blob([pdfBytes], {
    type: "application/pdf"
});

现在，生成的PDF文件已经可以用来预览和下载了。

预览过滤后的文档

在下载之前，应用程序会显示处理后的PDF文件，这样用户就可以确认所应用的滤镜效果是否正确。

预览功能提供了页面导航和旋转控制，让用户能够在保存文件之前轻松查看最终结果。

重新开始

如果用户想要处理另一份文档，只需点击一下即可重置应用程序的状态。

resetButton.addEventListener("click", () => {
    location.reload();
});

重新加载后，上传的PDF文件会被清除，所有滤镜层也会被移除，预设效果会恢复到初始状态，应用程序会返回到最初的上传界面。

预览结果

在下载编辑后的文档之前，让用户先查看处理后的PDF文件是非常有帮助的。这样他们就可以确认所有选中的滤镜是否都被正确应用了，必要时还可以进行相应的调整。

加载生成的PDF文件。

let finalPdf = null;

async function showPreview() {
    const bytes = await generatedPdf.arrayBuffer();

    finalPdf = await pdfjsLib.getDocument({
        data: bytes
    }).promise;

    renderPreviewPage(1);
}

渲染选中的页面。

async function renderPreviewPage(pageNumber) {
    const page = await finalPdf.getPage(pageNumber);
    const viewport = page.getViewport({
        scale: 1.5
    });

    previewCanvas.width = viewport.width;
    previewCanvas.height = viewport.height;

    await page.render({
        canvasContext: previewCanvas.getContext("2d"),
        viewport
    }).promise;
}

用户可以在下载最终的PDF文件之前，浏览每一页处理后的结果。

重命名并下载

在保存生成的PDF文件之前，用户可以选择自定义的文件名。

创建用于输入文件名的字段。

<input type="text" id="outputFilename" value="filtered-document.pdf">

获取文件名。

function getFilename() {
    let filename = outputFilename.value.trim();

    if (!filename) {
        filename = "filtered-document.pdf";
    }

    if (!filename.toLowerCase().endsWith(".pdf")) {
        filename += ".pdf";
    }

    return filename;
}

显示有关生成的PDF文件的有用信息。

pageCount.textContent = `${finalPdf.numPages} 页`;
fileSize.textContent = formatFileSize(generatedPdf.size);

下载文档。

downloadButton.addEventListener("click", () => {
    const url = URL.createObjectURL(generatedPdf);
    const link = document.createElement("a");

    link.href = url;
    link.download = getFilename();
    link.click();

    URL.revokeObjectURL(url);
});

所有操作都在浏览器的本地环境中完成，这样既能保护用户的文档文件，又能减少上传所需的时间。

演示：PDF过滤器工作室的工作原理

整个操作流程仅包含几个步骤。

步骤1：上传PDF文件

用户只需将PDF文件拖放到上传区域，或点击“选择PDF文件”按钮即可开始上传。

步骤2：预览PDF文件

系统会使用PDF.js技术逐页显示上传的文档。用户在编辑之前可以浏览文档内容并旋转页面。

步骤3：配置过滤器选项

用户可以创建一个或多个过滤层，调整亮度、对比度、饱和度、模糊效果、不透明度、灰度等级、棕褐色调、反转颜色、色调旋转等参数，或直接应用预设的效果。

步骤4：应用过滤器

点击将过滤器应用于PDF来处理选中的页面。

步骤5：查看结果

处理完成的PDF会显示在预览窗口中，供您最终核对。

步骤6：重命名并下载

最后，用户可以根据需要为输出文件重新命名，查看页数和文件大小，然后下载编辑后的PDF文件。

性能提示

对高分辨率的PDF页面应用多个过滤器会增加处理时间。因此，每次不必处理整个文档，只需处理选中的页面即可。

for (const page of selectedPages) {
    await processPage(page);
}

只有当过滤器的值发生变化时，才重新生成Canvas过滤器字符串，而无需在每次渲染时都重新生成它。

context.filter = buildFilterString(filters);

下载完处理完成的文档后，要及时释放临时对象URL以释放内存。

URL.revokeObjectURL(downloadUrl);

这些优化措施有助于确保应用程序在处理大型多页PDF文档时仍能保持良好的响应速度。

常见错误

一个常见的错误是在已经应用了过滤器的Canvas上再次绘制被过滤的页面。在应用新的过滤器配置之前，务必先渲染原始的PDF页面。

await renderPage(currentPage);

另一个问题是在处理完成后忘记重置Canvas的过滤器设置。

context.filter = "none";

最后，如果同时应用太多效果强烈的过滤器（如模糊、发光效果或多次对比度调整），会延长处理时间，并导致不可预期的视觉效果。通常情况下，只应用实际需要的过滤器，才能得到更清晰的结果和更好的性能。

总结

通过本教程，您使用JavaScript构建了一个基于浏览器的PDF过滤器工具。

你已经学会了如何上传PDF文件，使用PDF.js来渲染页面，创建可重复使用的滤镜层，并通过Canvas API应用亮度、对比度、饱和度、模糊效果、不透明度、灰度处理、棕褐色转换、颜色反转以及色调旋转等视觉效果。此外，你还能利用PDF-lib生成新的PDF文件，预览处理后的文档，重新命名输出文件，并直接从浏览器中下载它。

与那些专为特定功能设计的PDF编辑工具不同，这个项目允许用户将多种视觉效果结合在一起，形成灵活的编辑工作流程，而且所有的处理操作都仅在浏览器内部完成。

你可以通过PDF Filter Studio来体验这一完整的工作流程。

此外，你还可以通过添加自定义滤镜预设、利用人工智能技术进行图像优化、应用选择性区域过滤功能、添加水印，或是执行批量处理操作，进一步扩展这个工具的功能，从而打造出一个更加强大的基于浏览器的PDF编辑器。