如何使用JavaScript构建基于浏览器的PDF图像提取工具

const buffer =

await file.arrayBuffer();

loadPDF(buffer);

此时，PDF文件已经加载到内存中，可以开始生成预览页面了。

预览已上传的PDF页面

在提取图片之前，用户应先确认自己上传的是正确的文档。

该应用程序并不会立即扫描整个PDF文件，而是会为每一页生成缩略图预览。这些预览可以帮助用户确认页面顺序、查看文档内容，并判断嵌入图片的位置。

对于那些由大量页面组成的报告、产品目录、演示文稿、杂志、宣传册、电子书或技术文档来说，这种预览功能尤为实用。

每个缩略图都是使用PDF.js生成的，并以响应式网格布局进行显示。

首先，加载已上传的文档：

const pdf = await pdfjsLib

.getDocument、

    data:buffer

})

promise;

接下来，遍历每一页：

for (

let pageNumber = 1;

pageNumber <= pdf.numPages;

pageNumber++;

{

    renderPage(pageNumber);

}

将页面内容渲染为canvas图像：

const page =

await pdf.getPage(pageNumber);

const viewport =

page.getViewport、

    scale: 0.35

);

const canvas =

document.createElement("canvas");

canvas.width = viewport.width;

canvas.height = viewport.height;

await page.render，

    canvasContext:

    canvas.getContext("2d"),

    viewport

).promise;

最后，将生成的缩略图添加到页面中：

previewContainer

.appendChild(canvas);

当渲染完成后，所有页面都会在预览区域中显示出来。

用户可以通过滚动缩略图来确认上传的确实是正确的文档，然后再开始提取图片内容。

虽然预览界面会显示整页的内容，但实际上还没有进行任何数据的提取操作。下一步会扫描PDF文件的内部结构，以便逐一找到所有嵌入的图片。

为什么预览PDF文件如此重要

虽然预览功能看起来很简单，但它确实能显著提升用户体验。

如果没有预览功能，用户在开始提取数据之前就无法确认自己选择的文件是否正确。尤其是在处理那些文件名相似的多个PDF文件时，这一点尤为重要。

页面缩略图还能帮助用户判断文档中图片的具体位置。例如，产品目录可能只在某些页面上包含照片，而技术报告则可能只在特定的章节中才有图表。

通过先查看这些缩略图，用户可以在应用程序开始扫描嵌入图片之前，确认文件内容确实是正确的。

这个简单的验证步骤能够减少错误，避免不必要的处理，从而使整个工作流程显得更加直观。

查找嵌入的图像

一旦PDF页面被渲染并在预览区域显示出来，应用程序就可以开始搜索其中嵌入的图像了。

这个阶段与生成页面预览不同。预览功能只是将每页呈现为完整的视觉图像，而提取过程则会检查PDF文件的内部结构，以找到文档中存储的所有嵌入图像对象。

系统会逐页扫描文件。如果发现了嵌入图像，应用程序会记录下这些图像的位置、尺寸、格式以及所在的页面编号，然后准备将其提取出来。

这种逐页扫描的方式使得后续对提取出的图像进行整理变得更加方便，同时也能让用户清楚地了解每张图像在文档中的原始位置。

只有当用户点击提取图像按钮后，扫描过程才会开始。这样一来，如果他们只是想预览文档，就可以避免不必要的处理。

首先，为提取按钮创建点击事件处理程序：

document.getElementById("extractBtn").addEventListener("click", extractImages);

接下来，遍历上传的PDF文件中的每一页：

for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {  
    const page = await pdf.getPage(pageNumber);  
}

读取该页面所包含的所有操作信息：

const operatorList = await page.getOperatorList();

然后检查每一项绘图操作，判断其中是否包含嵌入图像：

operatorList.fnArray.forEach(operation => {  
    if (operation === pdfjsLib.OPS.paintImageXObject) {  
        console.log("找到图像");  
    }  
});

当所有页面都被扫描完毕之后，应用程序会生成一个集合，将所有找到的图像按照它们所在的页面进行分类。

这个集合将成为后续提取图像操作的基础。

从PDF页面中提取图像

一旦识别出所有的嵌入图像对象，应用程序就会开始将它们从PDF文件中提取出来。

与截取整个页面的截图不同，这种方法会尽可能地单独提取每一张嵌入图像。因此，提取出来的图像能够保持其原有的质量、尺寸和压缩格式，而不会受到页面预览分辨率的影响。

每张图像都会被归类到它所在的页面中。这种分类方式使得用户能够在大型报告、杂志、宣传册、演示文稿、产品目录、技术手册和研究论文等文件中更加方便地查找其中的图形元素。

每当某页的处理完成，从中提取出的图片会先被存储在一个JavaScript数组中，之后才会在浏览器中显示出来。

创建一个用于存储提取出的图片的数组：

const extractedImages = [];

将每一张提取到的图片都保存到这个数组中：

extractedImages.push({

    page:,

    pageNumber:,

    image:,

    imageData:,

    type:,

    imageType
});

每个被存储在数组中的对象都包含了后续会展示给用户的有用信息。

这个提取过程会一直持续，直到上传的PDF文件中的所有页面都被处理完毕。

一旦全部处理完成，浏览器就会立即显示这些提取出的图片，而无需再进行任何额外的处理步骤。

显示提取出的图片

提取工作完成后，应用程序会将所有恢复出来的图片以有序的方式展示在一个图库中。

系统不会将所有图片集中显示在一起，而是会根据这些图片所在的页面对其进行分类。这样的排列方式有助于用户更清楚地了解原始文档的结构。

对于每一张提取出的图片，应用程序都会显示它的预览图以及一些有用的技术信息。

用户可以立即看到图片的尺寸、格式，以及它原本所在的具体页面。这些额外信息可以帮助用户在下载之前判断某张图片是否适合再次使用。

例如，一张高分辨率的产品照片可能很适合用于营销材料，而一个小公司的标志可能只适合用于品牌宣传。

遍历所有提取出的图片：

extractedImages.forEach(image => {

    renderImageCard(image);

});

创建预览卡片：

const card = document.createElement("div");

card.className = "image-card";

将图片的预览内容插入到卡片中：

const img = document.createElement("img");

img.src = image.image;

显示图片的详细信息：

details.innerHTML =`

Dims: ${image.width} × ${image.height}




Type: ${image.type}
`;

当所有的预览卡片都被创建完成后，图库就会将所有提取出的图片按照它们所属的页面进行分类展示。

这种布局方式可以让用户清晰地看到上传的PDF文件中包含的所有图片，同时也能方便地进行单个图片的下载操作。

下载单个图片

许多用户并不需要PDF文件中包含的所有图片。

例如，设计师可能只想要宣传册中的公司标志，而研究人员可能只需要一篇科学论文中的一张图表。

为了满足这些需求，每张提取出来的图片都配有独立的下载按钮。

点击该按钮后，浏览器只会下载选中的图片，而不会影响其他已提取的图片。

这样用户就可以快速保存他们真正需要的图片。

创建下载按钮：

const button = document.createElement("button"); button.innerText = "下载";

为按钮添加点击事件：

button.onclick = () => downloadImage(image);

生成下载链接：

const link = document.createElement("a"); link.href = image.image; link.download = image fileName; link.click();

提供独立的下载按钮可以让应用程序更加灵活，因为用户只需保存他们真正需要的图片，而无需下载所有提取出的文件。

下载PDF中的所有图片

大型PDF文件通常会包含数十甚至数百张嵌入式的图片。

如果逐一下载这些图片，既耗时又繁琐。
为了简化这一流程，应用程序还提供了“下载PDF中的所有图片”按钮。
提取操作完成后，点击该按钮即可自动下载文件中每一页的所有图片。
这个功能在处理供应商目录、产品宣传册、杂志、年度报告、技术文档、电子书、教学材料以及包含大量图形的演示文稿时尤为实用。
遍历所有提取出的图片：

extractedImages.forEach(image => downloadImage(image));

为下载按钮添加点击事件：

downloadAllButton.addEventListener("click", downloadAllImages);

最后，让用户能够重新开始提取操作：

startOverButton.addEventListener("click", resetApplication);

下载完成后，用户可以点击“重新开始”按钮，上传另一个PDF文件并重复提取流程，而无需刷新浏览器。

演示：PDF图片提取工具的工作原理

步骤1：上传您的PDF文档

图片提取流程首先需要通过拖放区域或文件选择器来上传PDF文档。

选定文档后，浏览器会先验证上传的文件是否为PDF格式，才会将其读入内存。由于所有处理操作都在本地完成，因此上传的文档永远不会离开用户的电脑，这使得该工具非常适用于处理包含机密信息的商业报告、产品目录、演示文稿、合同、技术手册、研究论文等各类敏感文件。

当PDF文件成功加载后，应用程序会先为每一页生成预览图，然后才开始提取图片内容。

步骤2：预览已上传的PDF页面

上传完成后，应用程序会为文档中的每一页生成缩略图预览。

用户无需立即开始扫描整个PDF文件来查找图片，而是可以先直观地查看整个文档的内容。这样他们就能确认自己选择的确实是正确的PDF文件，并且能快速判断哪些页面包含照片、图表、插图等图形元素。

当处理内容较多的产品目录、杂志、年度报告、宣传册、技术文档、教育书籍或研究论文时，这种预览功能尤其实用——这些文件往往包含数十甚至数百页的内容。

这个验证步骤有助于避免不必要的处理操作，从而提升整体使用体验。

步骤3：提取嵌入的图片

确认文档内容无误后，用户只需点击提取图片按钮，程序就会开始扫描PDF文件。

应用程序会逐页检查文档内容，寻找其中嵌入的图片资源。与截图或页面渲染不同，该工具会尽可能地恢复原始图片的资源格式，从而保证图片的质量和尺寸不会被改变。

在处理每一页时，系统会将找到的所有图片按照它们最初出现的页面顺序进行分类整理。这样的组织方式使得用户日后查看提取结果时会更加方便。

根据PDF文件的大小以及其中嵌入的图片数量，对于较大的文档来说，提取数据可能需要几秒钟的时间。

步骤4：查看提取出的图片

提取过程完成后，浏览器会将所有恢复出来的图片以有序的方式展示在画廊中。

该应用程序不会将所有图片集中显示在一起，而是将结果分页呈现。这样用户就能清楚地知道每张图片在原始文档中的位置。

每张图片都会附带预览图以及诸如页码、图片尺寸和格式等有用信息。这些信息有助于用户在下载之前快速找到所需的图片。

例如，一份宣传册可能包含公司标志、横幅、图标以及分布在多页上的产品照片。按页分组显示图片可以让用户更轻松地浏览这些文件。

步骤5：下载单个图片或按页下载

每张提取出的图片都配有独立的下载图片按钮。

当用户只需要从大量文档中获取一两张图片时，这个功能非常实用。他们可以只下载与自己工作相关的插图、图表、产品照片或标志，而无需下载所有提取出的图片。

例如，设计师可能只需要一个公司标志，而营销团队可能只想下载供应商目录中的产品图片。单独下载这些文件可以有效避免下载不必要的文件，从而简化工作流程。

点击下载按钮后，浏览器会立即保存选中的图片，无需进行任何额外的处理。

步骤6：下载所有图片

对于那些需要文档中所有图片的用户，该应用程序还提供了从PDF文件中下载所有图片按钮。

提取过程完成后，点击此按钮即可自动下载从所有页面中恢复出来的所有图片。与逐一下载每张图片相比，这种方式可以节省大量时间。

这一功能在处理包含大量嵌入图片的产品目录、营销宣传册、演示文稿、教育书籍、技术手册、杂志、供应商目录或公司报告时尤为实用。

下载完成后，用户可以点击重新开始，清除当前会话并上传另一份PDF文件，而无需刷新页面。

步骤7：开始新的提取操作

下载所需的图片后，用户可以继续处理其他PDF文件。

点击重新开始会清除已上传的文档，删除所有生成的预览图，重置提取到的图片集，并将应用程序恢复到初始状态。

这样，用户就可以在同一会话中处理多个PDF文件，而无需重新加载浏览器或打开其他应用程序。

重置过程瞬间完成，因此在一天内需要处理大量PDF文件时，这一功能能够显著提升工作效率。

性能优化技巧

通常来说，图片提取的速度比OCR更快，因为应用程序直接提取现有的图片对象，而非识别文字。不过，那些包含数百页内容或高分辨率图形的庞大PDF文件，仍然可能需要较长的处理时间。

一个简单的优化方法是按顺序处理页面，而不是试图同时分析所有页面。

for (

let page = 1;

page <= pdf.numPages;

page++;

{

    await extractPageImages(page);

}

仅将所需的页面加载到内存中，既能减少浏览器的内存占用，也能在处理大型文件时提高稳定性。

如果应用程序支持页面选择功能，用户就可以只从特定页面中提取图片，这样就能大大缩短处理大量目录或报告所需的时间。

const startPage = 10;

const endPage = 25;

图片下载完成后，请释放所有临时使用的浏览器资源：

URL.revokeObjectURL(

imageURL

);

最后，在处理另一份PDF文件之前，请清除已经提取到的图片集合。

extractedImages.length = 0;

这些小小的优化措施有助于确保应用程序在处理包含数百张嵌入式图形的文档时仍能保持良好的响应速度。

实际应用中的重要注意事项

并不是所有的PDF文件都包含嵌入式图像。

有些文档完全由文本和矢量图形组成，而另一些文档则可能包含被扫描成单页图像的页面。了解原始PDF文件是如何创建的，有助于在开始提取操作之前设定合理的预期。

在处理任何上传的文件之前，务必先对其进行验证。

if (

file.type !== "application/pdf"

{

    alert(

    "请上传有效的PDF文件。"

    );

}

有些PDF生成工具会大幅压缩嵌入式图像以减小文件大小。在这种情况下，提取出来的图像质量将与PDF文件中存储的原始质量相同，但其分辨率也无法得到提升。

用户在下载每一张提取出的图像之前，也应先检查这些图像的质量，尤其是当处理包含数百张图形的庞大报告或目录时。

由于该应用程序的所有操作都是在浏览器内部进行的，因此在进行图像提取的过程中，机密文件始终处于受保护的状态。这使得基于浏览器的图像提取工具非常适合用于处理商业报告、工程图纸、财务文件、法律记录、教育资源以及其他敏感的PDF文件。

应避免的常见错误

一个常见的错误是认为PDF文件中的每一个可见对象都可以被提取为图像文件。

实际上，许多图表、标志和图形都是矢量图形，而非位图图像。这类元素是通过绘图命令生成的，因此并不总能被提取为独立的图像文件。

另一个需要避免的错误是依赖截图来代替提取嵌入式图像。

截图只能捕捉到屏幕上显示的页面内容，这往往会导致图像质量下降，并且截图中还会包含一些不必要的页面元素。

在展示提取结果之前，务必确认系统中确实检测到了嵌入式图像。

if (

extractedImages.length === 0

{

    alert(

    "未找到任何嵌入式图像。"

    );

}

有些用户还会忘记将提取出来的图像按照它们在原文档中的页码顺序进行整理。

根据图像在原文档中的位置对它们进行分类，可以大大方便用户浏览那些包含大量图形的大型文档。

最后，在下载任何提取出的图像之前，都请务必先仔细检查这些图像。

通过预览功能，用户可以在保存文件之前确认图像的质量、尺寸以及其在文档中的位置。

总结

通过本教程的学习，您已经使用JavaScript成功开发出了一个基于浏览器的PDF图像提取工具。

<您已经学会了如何上传PDF文件、预览文档页面、查找嵌入的图像对象、在保留图像原始质量的前提下提取这些图像、逐页整理提取后的结果文件、下载单个图像，以及直接通过浏览器下载所有被提取出来的图像。>

更重要的是，您了解了嵌入式图像与渲染后的页面预览之间的区别，这也使您能更深入地理解PDF文档的内部结构。

由于整个处理流程都是在浏览器内部本地运行的，因此用户可以安全地从机密的PDF文档中提取图形信息，而无需将这些文件上传到外部服务器上。

您可以在这里尝试这个完整的实现方案：

PDF图像提取工具： https://allinonetools.net/extract-images-from-pdf/

一旦掌握了这一处理流程，您还可以进一步扩展该项目的功能，例如添加重复图像检测功能、自动图像压缩功能、基于人工智能的图像标注功能、背景去除功能、图像格式转换功能、对提取出的图像进行OCR识别、水印检测功能，或是实现批量资产管理等功能。