如何使用JavaScript构建基于浏览器的PDF颜色反转工具

读取所选择的输出质量设置。

const quality = document.getElementById("outputQuality").value;

所选的输出质量将决定生成的新PDF的图像质量。

启用实时预览功能

实时预览功能允许用户在不生成新PDF的情况下立即查看颜色反转后的效果。

创建一个用于切换此功能的控件。

<>input type="checkbox" id="livePreview">

读取该控件的当前状态。

const livePreview = document.getElementById("livePreview").checked;

每当用户更改设置时，都需要重新刷新预览页面。

livePreviewToggle.addEventListener("change", updatePreview);

当实时预览功能被启用后，每当用户调整反转设置时，预览画面会自动更新。

重置设置

“重置”按钮会清除当前的配置，这样用户就可以在不重新加载页面的情况下开始操作。

创建这个按钮。

<button id="resetButton">

重置/清除

</button>

将设置恢复为默认值。

function resetSettings() {

    invertMode.value =
    "full";

    outputQuality.value =
    "high";

    livePreview.checked =
    false;

}

为这个按钮添加事件监听器。

resetButton
.addEventListener(

"click",

resetSettings

);

执行此操作后，设置面板会恢复到初始状态。

开始颜色反转功能

在确认设置无误后，用户就可以开始处理文档了。

创建这个操作按钮。

<button id="invertPdf">

反转PDF页面的颜色

<>/button>

启动颜色反转过程。

invertButton
.addEventListener(

"click",

async () => {

    await invertPdf();

});

反转PDF页面的颜色

现在我们来实现这个应用程序的核心功能：反转每页PDF的颜色。

操作流程非常简单。首先，PDF.js会将页面内容渲染到HTML画布上；接着，JavaScript会读取画布上的每个像素，将其红色、绿色和蓝色的数值进行反转，然后再将这些更新后的像素写回画布中；最后，使用PDF-lib将处理后的页面生成为新的PDF文件。

读取画布上的像素数据

一旦页面内容被渲染出来，就可以获取其对应的像素信息了。

const imageData =

context.getImageData(

    0,

    0,

    canvas.width,

    canvas.height

);

每个像素由四个数值组成：

• 红色

• 绿色

• 蓝色

• 透明度

这些像素数据被存储在一个数组中。

const pixels =
imageData.data;

我们将直接修改这个数组来实现颜色反转的效果。

反转每个像素的颜色

要反转一种颜色的数值，只需将其RGB值从255中减去即可。

需要遍历画布上的每一个像素才能完成这个操作。

for (

    let i = 0;

    while (i < pixels.length) {

        i += 4;
    }

    pixels[i] =
    255 - pixels[i];

    pixels[i + 1] =
    255 - pixels[i + 1];

    pixels[i + 2] =
    255 - pixels[i + 2];
}

阿尔法通道保持不变，因此透明元素仍然能够正确显示。

在修改了每个像素之后，需要将修改后的图像重新绘制到画布上。

context.putImageData(

    imageData,

    0,

    0

);

现在，页面预览会显示出颜色被反转后的效果。

更新实时预览效果

如果启用了实时预览功能，用户可以立即看到更改结果，而无需重新生成PDF文件。

请检查该功能是否处于激活状态。

if (

    livePreview.checked

) {

    await invertCurrentPage();

}

每当用户更改颜色反转模式、页面范围或质量设置时，都需要重新刷新预览效果。

async function updatePreview() {

    await renderPage(

        currentPage

    );

    await invertCurrentPage();

}

处理选定的页面

每次不需要处理整个文档，只需反转用户所选中的那些页面即可。

遍历用户选择的页面范围进行操作。

for (

    let page = startPage;

    page <= endPage;

    page++;

) {

    await processPage(
        page
    );

}

每处理完一个页面后，都会将其暂时存储起来，直到最终生成PDF文件时才会将其合并。

生成最终的PDF文件

创建一个新的PDF文档。

const outputPdf =

await PDFLib
.PDFDocument
.create();

将处理后的图像数据转换为图片格式。

const imageBytes =

await canvasToBytes(
    pdfCanvas
);

将生成的图片嵌入到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文件

当所有页面都处理完成后，就需要将文档保存下来。

const pdfBytes =

await outputPdf.save();

将生成的PDF字节数据转换为可供下载的文件格式。

generatedPdfBlob =

new Blob(

    [pdfBytes],

    {

        type:
        "application/pdf"

    }

);

生成的PDF文件现已可以用于预览和下载了。

预览结果

在下载处理后的文档之前，让用户先查看最终输出内容是非常有用的。这样他们就可以确认所选页面的颜色是否已经被正确反转，以及文档的显示效果是否符合预期。

将生成的PDF文件加载到PDF.js中。

async function showPreview() {

    const bytes =
        await generatedPdfBlob
            .arrayBuffer();

    finalPdf =
        await pdfjsLib
            .getDocument({

                data: bytes

            })
            .promise;

    renderFinalPage(1);

}

渲染所选页面。

async function renderFinalPage(
    pageNumber
) {

    const page =
        await finalPdf.getPage(
            pageNumber
        );

    const viewport =
        page.getViewport({

            scale: 1.5

        });

    finalCanvas.width =
        viewport.width;

    finalCanvas.height =
        viewport.height;

    await page.render、

        canvasContext:
        finalCanvas
            .getContext("2d"),

        viewport

    }).promise;

}

用户可以在下载之前先浏览处理后的文档内容。

重命名与下载

在保存PDF文件之前，用户可以为其指定自定义文件名。

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

<input

type="text"

id="outputFilename"

value="inverted-document.pdf">

获取用户输入的文件名。

function getFilename() {

    let filename =

    outputFilename
        .value
        .trim();

    if (!filename) {

        filename =
        "inverted-document.pdf";

    }

    if (
        !filename
        .endsWith(".pdf")
    ) {

        filename += ".pdf";

    }

    return filename;

}

显示额外的文件信息。

pageCount.textContent =

 `${finalPdf.numPages} 页`;

fileSize.textContent =

formatFileSize、

    generatedPdfBlob.size

);

下载生成的PDF文件。

downloadButton
.addEventListener(

"click",

() => {

    const url =

    URL.createObjectURL(
        generatedPdfBlob
    );

    const link =
        document.createElement(
            "a"
        );

    link.href =
        url;

    link.download =
        getFilename();

    link.click();

    URL.revokeObjectURL(
        url
    );

});

所有操作都在浏览器内部完成，因此用户可以在查看处理后的PDF文件后立即将其下载下来。

演示：PDF颜色反转工具的工作原理

让我们一起来了解整个操作流程。

步骤1：上传PDF文件

用户只需将PDF文件拖放到上传区域，或点击“选择PDF文件”即可。如果文档设置了密码保护，可以在上传前输入密码。

步骤2：预览文档

上传的PDF文件会逐页显示，用户可以在进行任何修改之前先浏览整个文档内容。

步骤3：配置设置选项

用户可以选择需要处理的页面范围、输出文件的质量，以及是否启用实时预览功能。

步骤4：预览反转后的颜色效果

如果启用了实时预览功能，当前页面会立即显示反转后的效果，用户可以提前查看修改后的文档外观。

步骤5：生成PDF文件

点击“反转PDF颜色”按钮后，系统会处理选中的页面，并生成新的PDF文件，其中包含所有经过颜色反转处理的页面。

步骤6：审核并下载文件

生成的PDF文件会在最终预览界面中显示。用户可以重新命名输出文件，查看页数和文件大小，然后下载完成的文档。

性能优化技巧

较大的PDF文件可能需要更长的处理时间。仅渲染当前页面、更新预览内容而非重新加载整个文档，以及仅处理选中的页面范围，这些方法都能显著提升处理效率。

for (

    let page = startPage;

    page <= endPage;

    page++;

) {

    await processPage(
        page
    );

}

下载完成后，请释放临时使用的资源。

URL.revokeObjectURL(
    downloadUrl
);

这些小小的优化措施能够帮助应用程序在处理大型PDF文件时依然保持良好的响应速度。

常见错误

一个常见的错误是在没有先渲染PDF页面的新副本的情况下，反复修改原始画布内容。这种操作会导致颜色多次被反转。

在进行任何颜色调整之前，务必先渲染原始页面。

await renderPage(
    currentPage
);

另一个容易犯的错误是尝试处理超出有效范围的页码。

if (

    pageNumber < 1 ||

    pageNumber > pdfDocument.numPages

) {

    return;

}

最后需要记住的是，较高的输出质量通常会导致PDF文件体积增大。用户应根据自己的实际需求，选择能够兼顾图像清晰度与文件大小的设置。

总结

通过本教程，您使用JavaScript开发了一个基于浏览器的PDF颜色反转工具。

您学会了如何上传PDF文件、支持加密文件、利用PDF.js渲染页面、通过HTML Canvas API修改像素颜色、使用PDF-lib生成新的PDF文件、预览处理完成的文档、重命名输出文件，并直接从浏览器中下载它。

由于所有处理操作都是在本机进行的，因此用户可以在不将敏感文件上传到外部服务器的情况下完成PDF颜色的反转操作。

您可以通过这个PDF颜色反转工具来体验整个工作流程。

这个项目还可以进一步扩展：添加自定义颜色滤镜、选择性页面预览功能、亮度与对比度调节选项、灰度转换效果、棕褐色处理效果、批量处理功能，或是其他文档优化工具。