ブログ一覧
life2026-07-105分

PDF変換機

PDFファイルを画像形式に変換するツール。pdf.jsを活用したブラウザベースの変換技術とDPI解像度の影響を解説します。


PDF変換機


text

Photo by Finn Mund on Unsplash

PDF変換とは

PDF(Portable Document Format)は、1993年にAdobe Systemsが生んだ電子文書形式。文書の共有、アーカイブ、ウェブサイトへの掲載など、目的は多岐にわたる。画像に変換すれば、印刷にもデジタル表示にも対応させられます。

近年では、サーバーにアップロードせずにブラウザ上で直接変換を行う技術が普及しており、JavaScriptベースのPDFレンダリングライブラリが広く使用されています。

同僚の紹介による松本さんはフリーランスのデザイナーですが、クライアントから渡されたPDFのロゴを画像に変換する必要が頻繁にあるそうです。以前はオンラインツールにアップロードしていましたが、機密性の問題からブラウザベースの変換ツールに切り替えたといいます。DPIの設定を300にしたことで、印刷品質の画像が得られたと喜んでいました。

PDFの基本構造

PDFの内部構造

PDFファイルは、以下の要素で構成されます。

  • ヘッダー: ファイルのバージョン情報を含む

  • オブジェクト: テキスト、画像、フォントなどのコンテンツ

  • クロストリーム: オブジェクト間の参照関係

  • トレイラー: 終了マーカーと参照テーブルの位置情報
  • 画像変換のプロセス

    PDFから画像への変換は、以下のステップで行われます。

  • PDFパース: ファイル構造の解析

  • コンテンツストリームの展開: オブジェクトの復号

  • ページのレンダリング: ベクターデータのラスタライズ

  • 画像エンコード: PNG、JPEGなどの形式への変換
  • pdf.jsによる変換

    pdf.jsの概要

    pdf.jsは、Mozillaが開発したJavaScriptベースのPDFレンダリングライブラリです。サーバーサイドの処理を必要とせず、ブラウザ上でPDFの表示と変換が可能です。

    基本的な変換フロー

    pdf.jsを使用したPDFから画像への変換の基本的なフローは以下の通りです。

  • PDFドキュメントの読み込み

  • ページの取得

  • キャンバスへのレンダリング

  • キャンバスから画像への変換
  • JavaScriptでの変換例

    ```javascript
    // PDFファイルの読み込み
    const pdf = await pdfjsLib.getDocument(url).promise;

    // ページの取得
    const page = await pdf.getPage(1);

    // スケールの設定
    const viewport = page.getViewport({ scale: 2.0 });

    // キャンバスの作成
    const canvas = document.createElement('canvas');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // レンダリング
    const ctx = canvas.getContext('2d');
    await page.render({ canvasContext: ctx, viewport }).promise;

    // 画像として保存
    const imageData = canvas.toDataURL('image/png');
    ```

    DPI解像度の影響

    DPIとは

    DPI(Dots Per Inch)は、1インチあたりのドット数を表す解像度の単位です。PDFを画像に変換する際、DPIの設定は出力画像の品質とファイルサイズに直結します。

    DPIとスケールの関係

    スケールファクターとDPIの関係は以下の通りです。

    $$\text{スケールファクター} = \frac{\text{目標DPI}}{\text{PDFの解像度}}$$

    標準的なPDFの解像度は72 DPIと仮定すると:

    | 目標DPI | スケールファクター | 解像度の用途 |
    |:---:|:---:|:---|
    | 72 DPI | 1.0x | スクリーン表示 |
    | 150 DPI | 2.08x | ウェブ用 |
    | 300 DPI | 4.17x | 印刷用 |
    | 600 DPI | 8.33x | 高解像度印刷 |

    DPIとファイルサイズ

    DPIを2倍にすると、ピクセル数は4倍(2²)になり、ファイルサイズも大幅に増加します。

    $$\text{ファイルサイズ} \propto \text{DPI}^2$$

    300 DPIの画像は72 DPIの約17倍のピクセル数になります。

    変換形式の比較

    PNG形式

    PNG(Portable Network Graphics)は、非破壊圧縮を用いる画像形式です。

    • 利点: 透過サポート、非破壊圧縮、テキストの鮮明な保存

    • 欠点: ファイルサイズが大きい

    • 用途: テキスト中心のPDF、スクリーンショット


    JPEG形式

    JPEG(Joint Photographic Experts Group)は、可変長圧縮を用いる画像形式です。

    • 利点: 小さいファイルサイズ、写真に適している

    • 欠点: 非可逆圧縮、透過非サポート

    • 用途: 写真中心のPDF、ウェブ掲載


    TIFF形式

    TIFF(Tagged Image File Format)は、高品質な画像保存に適した形式です。

    • 利点: 高品質、複数ページ対応

    • 欠点: ファイルサイズが非常に大きい

    • 用途: 印刷用、アーカイブ


    実用的アドバイス

    適切なDPIの選択

    変換目的に応じて、適切なDPIを選択することが重要です。

    • ウェブ掲示板用: 150 DPI程度

    • A4印刷用: 300 DPI程度

    • ポスター印刷用: 600 DPI以上


    バッチ変換

    複数ページのPDFを一括で変換する際は、メモリ使用量に注意が必要です。ページごとに順次処理し、不要なページは尽早解放することが推奨されます。

    まとめ

    PDF変換機は、PDFファイルを画像に変える便利なツール。pdf.jsによるブラウザベースの変換は、サーバーへの負荷を減らし、プライバシーも守ります。DPIの設定は出力品質とファイルサイズの天秤——用途に応じた最適なポイントを見つけることが、効率的な変換のカギです。