HTMLファイル一つでPDF編集する試み

# PDFをjpgに変換するコード
```
<html>
<head>
  <meta charset="UTF-8">
  <title>PDFをjpg変換アプリ</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
</head>
<body>
  <!-- PDFファイルを選択するためのinput要素 -->
  <input type="file" id="fileInput" accept="application/pdf" onchange="loadPDF()">
  <!-- PDFファイルを表示するためのcanvas要素 -->
  <canvas id="canvas" width="800" height="600"></canvas>
  <!-- 画像ファイルをダウンロードするためのbutton要素 -->
  <button id="downloadButton" onclick="downloadImage()">画像をダウンロード</button>
  <script>
    // PDFファイルを読み込む関数
    function loadPDF() {
      // input要素からファイルを取得
      var file = document.getElementById("fileInput").files[0];
      // ファイルがPDFでなければ処理を中止
      if (file.type !== "application/pdf") {
        alert("PDFファイルを選択してください");
        return;
      }
      // PDFファイルを読み込む
      var reader = new FileReader();
      reader.onload = function(e) {
        // PDFファイルのURLを取得
        var url = e.target.result;
        // PDFファイルを解析
        pdfjsLib.getDocument(url).promise.then(function(pdf) {
          // 最初のページを取得
          pdf.getPage(1).then(function(page) {
            // ページのサイズを設定
            var scale = 1.5;
            var viewport = page.getViewport({scale: scale});
            // canvas要素を取得
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            // ページをcanvasに描画
            var renderContext = {
              canvasContext: context,
              viewport: viewport
            };
            page.render(renderContext);
          });
        });
      };
      reader.readAsDataURL(file);
    }

    // 画像ファイルをダウンロードする関数
    function downloadImage() {
      // canvas要素を取得
      var canvas = document.getElementById("canvas");
      // canvasの内容を画像データに変換
      var imageData = canvas.toDataURL("image/png");
      // 画像データをBlobオブジェクトに変換
      var blob = dataURLtoBlob(imageData);
      // BlobオブジェクトをURLに変換
      var url = URL.createObjectURL(blob);
      // a要素を作成
      var a = document.createElement("a");
      // a要素の属性を設定
      a.href = url;
      a.download = "image.png";
      // a要素をクリック
      a.click();
      // URLを開放
      URL.revokeObjectURL(url);
    }

    // 画像データをBlobオブジェクトに変換する関数
    function dataURLtoBlob(dataURL) {
      // 画像データのヘッダーと本体を分離
      var parts = dataURL.split(",");
      // ヘッダーからMIMEタイプを取得
      var mime = parts[0].split(";")[0].split(":")[1];
      // 本体をバイナリデータに変換
      var bin = atob(parts[1]);
      // バイナリデータをUint8Arrayに変換
      var buffer = new Uint8Array(bin.length);
      for (var i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
      }
      // Uint8ArrayをBlobオブジェクトに変換
      var blob = new Blob([buffer], {type: mime});
      return blob;
    }
  </script>
</body>
</html>
```
# PDFファイルを結合するコード
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>PDFファイル結合アプリ</title>
</head>
<body>
  <!-- ファイル選択 -->
  <input id="input" type="file" multiple accept="application/pdf">
  <!-- ファイル結合 -->
  <button id="merge">結合</button>
  <!-- ファイルダウンロード -->
  <a id="download" href="#" download="merged.pdf">ダウンロード</a>
  <!-- PDF-libの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js"></script>
  <script>
    // PDF-libのインスタンスを作成
    const { PDFDocument } = PDFLib;

    // ファイル選択の要素を取得
    const input = document.getElementById("input");

    // ファイル結合のボタンの要素を取得
    const merge = document.getElementById("merge");

    // ファイルダウンロードの要素を取得
    const download = document.getElementById("download");

    // ファイル結合のボタンがクリックされたときの処理
    merge.addEventListener("click", async () => {
      // 選択されたファイルを配列に変換
      const files = Array.from(input.files);

      // 選択されたファイルがPDFであるかチェック
      if (files.some(file => file.type !== "application/pdf")) {
        alert("PDFファイルのみ選択してください");
        return;
      }

      // 結合するPDFドキュメントを作成
      const mergedPdf = await PDFDocument.create();

      // 選択されたファイルを順に結合
      for (const file of files) {
        // ファイルをバイナリデータに変換
        const arrayBuffer = await file.arrayBuffer();
        // バイナリデータをPDFドキュメントに変換
        const pdf = await PDFDocument.load(arrayBuffer);
        // PDFドキュメントのページをコピー
        const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
        // コピーしたページを結合するPDFドキュメントに追加
        copiedPages.forEach(page => mergedPdf.addPage(page));
      }

      // 結合したPDFドキュメントをバイナリデータに変換
      const mergedArrayBuffer = await mergedPdf.save();

      // バイナリデータをBlobに変換
      const blob = new Blob([mergedArrayBuffer], { type: "application/pdf" });

      // BlobをURLに変換
      const url = URL.createObjectURL(blob);

      // ダウンロードの要素のhref属性にURLを指定
      download.href = url;
    });
  </script>
</body>
</html>
```