用 JavaScript 和 CSS 创建图片转 PDF 转换器

前端

2023-11-01 05:30:27

概览：

在这个数字时代，人们经常需要将图像转换为 PDF 格式，以方便存储、分享和打印。本教程将向您展示如何使用 JavaScript 和 CSS 来创建一个简单的图片转 PDF 转换器，允许您轻松地将本地图像转换为 PDF 文件。

先决条件：

在开始之前，您需要确保您的计算机上安装了以下软件：

最新版本的谷歌浏览器或火狐浏览器。
一个文本编辑器，比如记事本或 Sublime Text。
Node.js 和 npm（用于安装项目依赖项）。

创建项目：

打开文本编辑器，创建一个新的文件夹并命名为 "image-to-pdf-converter"。
在该文件夹中，创建一个名为 "index.html" 的 HTML 文件。
在 "index.html" 文件中，添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Image to PDF Converter</h1>
  <form id="form">
    <input type="file" accept="image/*" id="image-input">
    <button type="submit">Convert to PDF</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

在同一文件夹中，创建一个名为 "style.css" 的 CSS 文件。
在 "style.css" 文件中，添加以下代码：

body {
  font-family: sans-serif;
}

h1 {
  margin-bottom: 1em;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="file"] {
  margin-right: 1em;
}

button {
  padding: 0.5em 1em;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background-color: #444;
}

最后，在同一文件夹中，创建一个名为 "script.js" 的 JavaScript 文件。
在 "script.js" 文件中，添加以下代码：

const form = document.getElementById('form');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const file = document.getElementById('image-input').files[0];

  if (!file) {
    alert('Please select an image to convert.');
    return;
  }

  const reader = new FileReader();

  reader.onload = () => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;

      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      const pdf = new jsPDF();
      pdf.addImage(canvas, 'JPEG', 0, 0, img.width, img.height);
      pdf.save('image.pdf');
    };
    img.src = reader.result;
  };

  reader.readAsDataURL(file);
});