如何使用JavaScript在浏览器中将图片转换为PDF格式——一份分步指导手册

无论是扫描后的文档、截图、收据、笔记、证书，还是多张照片，用户通常都需要一种快速的方法将这些图片合并成可下载的PDF文件。

现代浏览器让这一过程变得比以前容易多了。

我们现在可以直接在浏览器中使用JavaScript来处理这些图片，而无需将文件上传到服务器。这样，该工具既能保持高效运行，又能保护用户的隐私，同时使用起来也非常方便。

在本教程中，你将学习如何使用JavaScript构建一个基于浏览器的图片转PDF工具。

这个工具支持上传多张图片、对文件进行排序、选择图像的方向和页面大小、配置页边距，并将这些图片合并成单个PDF文件或多个独立的PDF文件。用户还可以直接在浏览器中预览并下载生成的文档。

整个转换过程完全在客户端完成，不需要任何后端支持。

目录

1. 图片转PDF的原理

2. 项目设置

3. 我们使用了哪些技术库？

4. 创建上传界面

5. 读取上传的图片

6. 生成PDF文件

7. 处理多张图片

8. 配置PDF参数

9. 重命名并下载PDF文件

10. 演示：图片转PDF工具的工作原理

11. 实际使用中的重要注意事项

12. 常见错误及避免方法

13. 总结

图片转PDF的原理

浏览器本身无法直接将多张图片合并成PDF文件。

为此，我们需要使用一个JavaScript PDF库。该库会创建页面、插入图片，最终将这些内容导出为可下载的PDF文档。

当用户将一张或多张图片上传到浏览器后，JavaScript会读取这些图片的数据，并将其准备好用于生成PDF文件。之后，该工具会创建PDF页面，在这些页面中插入上传的图片，最后将所有内容导出为PDF文件。

整个转换过程都是在浏览器的本地环境中完成的。

这意味着用户无需将私密文件上传到服务器上，这样一来，整个过程会更快，同时也更有利于保护用户的隐私。

项目设置

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

你只需要以下这些资源：

• 一个HTML文件

• 一个JavaScript文件

• 一个PDF处理库

不需要后端服务器或数据库。

我们使用的是哪个库？

我们将使用jsPDF库。这个库允许我们在JavaScript中直接生成PDF文件。

你可以通过CDN来引入该库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

一旦这个库被加载到浏览器中，我们就可以直接在浏览器里创建并导出PDF文件了。

创建上传界面

首先，从创建一个基本的上传区域开始：

<input type="file" id="upload" multiple accept="image/*">

<button onclick="convertToPDF()">
  转换为PDF
<>/button>

这样，用户就可以上传多个图片文件，并生成PDF文件。

下面是这个上传界面在工具内部的实际呈现效果：

你还可以为这个界面添加额外的控件，比如用于排序、设置页面布局、调整页边距以及选择合并方式等功能。

读取上传的图片

当用户选择了文件后，我们需要在JavaScript中读取这些文件的内容。

我们可以使用FileReader来实现这个功能：

const fileInput = document.getElementById("upload");

const files = fileInput.files;

for (const file of files) {
  const reader = new FileReader();

  reader.onload = function (e) {
    const imageData = e.target.result;

    console.log(imageData);
  };

  reader.readAsDataURL(file);
}

这样，上传的图片就会被转换成可读取的Base64格式的数据，之后就可以将这些数据插入到PDF文件中去了。

生成PDF文件

现在我们可以开始创建PDF文档了。

const { jsPDF } = window.jspdf;

const pdf = new jsPDF();

一旦PDF文件生成完成，我们就可以将图片插入到相应的页面中去了：

pdf.addImage(imageData, "JPEG", 10, 10, 180, 120);

这样，上传的图片就会以指定的位置和大小被添加到PDF页面中。

最后，将生成的PDF文件导出：

pdf.save("images.pdf");

这样，生成的PDF文件就会立即被下载下来。

处理多张图片

如果用户上传了多个文件，每张图片都会自动被添加到对应的PDF页面中。

例如：

files.forEach((file, index) => { 

  if (index !== 0) { 
    pdf.addPage(); 
  } 
});

这样，在将下一张图片插入文档之前，系统会先创建一个新的页面。

在某些情况下，用户可能希望多张图片放在同一个页面上，而不是每页只显示一张图片。

例如：

pdf.addImage(img1, "JPEG", 10, 20, 80, 80); 

pdf.addImage(img2, "JPEG", 110, 20, 80, 80);

这种方式可以让图库、报告或分组文档的排版更加灵活。

配置PDF设置

在生成最终的PDF文件之前，用户可以自定义一些布局和输出设置。

这些设置能够提升文档的质量，并让用户对生成的文件有更多的控制权。

以下是该工具中配置界面的外观：

排序图片

当上传了多张图片时，在生成PDF之前对它们进行妥善排序是非常重要的。

用户可以根据字母顺序对图片进行排序，也可以将顺序反过来，或者根据文件大小来排列图片。

例如，可以按照字母顺序对图片进行排序：

files.sort((a, b) => a.name.localeCompare(b.name));

你也可以根据文件大小来排序图片：

files.sort((a, b) => a.size - b.size);

以下是该工具中提供的排序选项示例：

这些功能有助于用户在将文件转换为PDF之前更高效地整理它们。

选择页面方向

不同的图片适合不同的页面方向。竖屏方向适合纵向的图片，而横屏方向则更适合宽幅图片。

例如：

const pdf = new jsPDF({ 
  orientation: "portrait" 
});

根据需要，你也可以将页面方向设置为"landscape"。

以下是该工具中提供的页面方向选项示例：

选择页面尺寸

PDF页面尺寸决定了生成文档的尺寸。

例如：

const pdf = new jsPDF({
  unit: "毫米",
  format: "A4"
});

这样就可以使用毫米为单位创建一个A4大小的PDF文档。

也可以支持其他格式，比如Letter、Legal或自定义的页面尺寸。

以下是在该工具中选择页面尺寸的示例：

添加边距

边距可以在图片与页面边缘之间创建间距。

如果没有边距，图片可能会碰到页面边框，从而显得拥挤不堪。

例如：

const margin = 10;

pdf.addImage(imageData, "JPEG", margin, margin, 180, 120);

以下是在该工具中设置边距的示例：

这样就可以为插入的图片创建更加整齐的间距。

自动调整图片大小

在将图片转换为PDF时，一个常见的问题就是图片的大小设置不正确。

如果图片是以固定的尺寸插入的，它们可能会被拉伸、超出页面范围，或者出现变形。

因此，最好能够动态计算图片的实际尺寸。

例如：

const pageWidth = pdf.internalPageSize.getWidth();

const imgWidth = pageWidth - 20;

const imgHeight = (image.height * imgWidth) / image.width;

pdf.addImage(imageData, "JPEG", 10, 10, imgWidth, imgHeight);

这样就可以自动按比例调整图片的大小，同时保持边距和布局的一致性。

合并选项

该工具的一个实用功能是支持多种输出方式。

例如，在制作报告、笔记或组合文件时，用户可能希望将所有上传的图片合并成一个PDF文档。

但在某些情况下，用户可能更倾向于为每张图片分别生成一个PDF文件，而不是将它们全部合并在一起。当需要导出单独的文档或扫描页面时，这种做法会非常有用。

自定义分组也是一个很有帮助的功能，因为它允许用户根据自己的需求或分类方式，将选中的图片合并成多个PDF文件。

这些不同的输出方式使得该工具能够更好地满足各种实际使用场景的需求。

一个简单的下拉菜单就能实现这些功能：

<select id="mergeMode">
  <option>>全部合并为单个PDF文件分别为每张图片生成单独的PDF文件自定义分组

const fileName = prompt("请输入PDF文件名：", "images");

pdf.save(`${fileName}.pdf`);

const MAX_SIZE = 10 * 1024 * 1024;

if (file.size > MAX_SIZE) {
  alert("图片太大，无法处理.");
  return;
}

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

const ctx = canvas.getContext("2d");

canvas.width = image.width * 0.5;
canvas.height = image.height * 0.5;

ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

const resizedImage = canvas.toDataURL("image/jpeg", 0.7);

if (!fileInput.files.length) {
  alert("请先上传图片.");
  return;
}