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>