JavaScriptでつくったPDFtoJPEGコンバータが動作しない

実現したいこと

アプリが動かないので動くようにしたい

アプリの概要

選択されたPDFを、指定されたDPIでJPEGに変換するアプリです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>PDF to JPEG コンバータ</title>
7</head>
8<body>
9  <input type="file" id="pdfInput" accept=".pdf">
10  <label for="dpiInput">DPI:</label>
11  <input type="number" id="dpiInput" value="150">
12  <button onclick="convertToJpeg()">変換</button>
13
14  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
15  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
16  <script>
17    async function convertToJpeg() {
18      const pdfInput = document.getElementById('pdfInput');
19      const file = pdfInput.files[0];
20
21      if (!file) {
22        alert("PDFが選択されていません。");
23        return;
24      }
25
26      const dpi = parseInt(document.getElementById('dpiInput').value);
27
28      const loadingTask = pdfjsLib.getDocument(file);
29      const pdf = await loadingTask.promise;
30      const pageCount = pdf.numPages;
31
32      const canvas = document.createElement('canvas');
33      const ctx = canvas.getContext('2d');
34
35      for (let pageNumber = 1; pageNumber <= pageCount; pageNumber++) {
36        const page = await pdf.getPage(pageNumber);
37        const viewport = page.getViewport({ scale: 1.0 });
38        const scale = dpi / 72; // Convert DPI to scale factor
39        canvas.width = Math.floor(viewport.width * scale);
40        canvas.height = Math.floor(viewport.height * scale);
41
42        const renderContext = {
43          canvasContext: ctx,
44          viewport: page.getViewport({ scale })
45        };
46
47        await page.render(renderContext).promise;
48
49        const imageData = canvas.toDataURL('image/jpeg', 1.0);
50        const link = document.createElement('a');
51        link.href = imageData;
52        link.download = `page_${pageNumber}.jpg`;
53        document.body.appendChild(link);
54        link.click();
55        document.body.removeChild(link);
56      }
57    }
58  </script>
59</body>
60</html>

int32_t

2024/03/25 13:52

ブラウザの開発者ツールのコンソールに何かエラーが表示されていませんか。

行動規範の内容に同意します

回答1件

ベストアンサー

以下でいかがでしょうか。
原因はライブラリの使い方の間違いです。
FileReaderを通してデータを取得し、pdfjsLib.getDocumentへ渡して下さい。
個人的には更にjszipなども使うと便利になるように感じました。

また、今後はコンソール上のエラーメッセージをご確認いただき、記載されるようお願いします。

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>PDF to JPEG コンバータ</title>
7    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
9  </head>
10  <body>
11    <input type="file" id="pdfInput" accept=".pdf">
12    <label for="dpiInput">DPI:</label>
13    <input type="number" id="dpiInput" value="150">
14    <button onclick="convertToJpeg()">変換</button>
15    <script src="script.js"></script>
16  </body>
17</html>

javascript
1'use strict';
2const pdfInput = document.getElementById('pdfInput');
3const dpiInput = document.getElementById('dpiInput');
4async function convertToJpeg () {
5  // FileReaderオブジェクト生成
6  const reader = new FileReader();
7  // loadイベント登録
8  reader.addEventListener('load', async function onLoad (event) {
9    const dpi = parseInt(dpiInput.value);
10    // FileReaderで読み取ったデータを取得
11    const url = reader.result;
12    const loadingTask = pdfjsLib.getDocument(url);
13    const pdf = await loadingTask.promise;
14    const pageCount = pdf.numPages;
15    const canvas = document.createElement('canvas');
16    const ctx = canvas.getContext('2d');
17    let page, viewport, scale, renderContext, imageData, link;
18    for (let pageNumber = 1; pageNumber <= pageCount; pageNumber ++) {
19      page = await pdf.getPage(pageNumber);
20      viewport = page.getViewport({scale: 1.0});
21      scale = dpi / 72; // Convert DPI to scale factor
22      canvas.width = Math.floor(viewport.width * scale);
23      canvas.height = Math.floor(viewport.height * scale);
24      renderContext = {
25        canvasContext: ctx,
26        viewport: page.getViewport({scale})
27      };
28      await page.render(renderContext).promise;
29      imageData = canvas.toDataURL('image/jpeg', 1.0);
30      // appendChild無しでも行けたはずです
31      link = document.createElement('a');
32      link.href = imageData;
33      link.download = `page_${pageNumber}.jpg`;
34      link.click();
35    }
36  }, false);
37  // DataURLとして読み込み(files.lengthなどで異常判定はした方が良いかもです)
38  reader.readAsDataURL(pdfInput.files[0]);
39}