JavaScriptを使用してPDFを画像に変換する方法

インターネットの発展に伴い、PDF 形式は多くのドキュメントを共有および交換するための標準形式になりました。ただし、処理のために PDF ファイルを複数の画像に変換する必要がある場合があり、そのためには JavaScript プログラミング言語の使用が必要になります。

JavaScript では、PDF.js ライブラリを使用して PDF を画像に変換する機能を実現できます。以下に具体的な導入手順をご紹介します。

1. PDF.js ライブラリ ファイルを導入する

JavaScript ファイルでは、まず PDF.js ライブラリ ファイルを導入する必要があります。 CDN を介してローカルにインポートするか、PDF.js ライブラリ ファイルをダウンロードしてインポートできます。

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

2. PDF ファイルの取得

次のコードを通じて PDF ファイルを取得できます:

const url = 'yourPDFFile.pdf';
const loadingTask = pdfjsLib.getDocument(url);

3. PDF ファイルをキャンバスにレンダリングします

次のコードを使用して PDF ファイルをキャンバスにレンダリングします:

loadingTask.promise.then(function(pdf) {
  // Get the first page
  const pageNumber = 1;
  pdf.getPage(pageNumber).then(function(page) {
    const canvas = document.getElementById('pdfCanvas');
    const context = canvas.getContext('2d');

    const viewport = page.getViewport({scale: 1.0});

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext).promise.then(function() {
      console.log('Page rendered');
    });
  });
}, function (reason) {
  console.error(reason);
});

ここでは、pdf.getPage() メソッドを使用して最初のページを取得しますPDF ファイルの。次に、canvas.getContext('2d') を使用して、キャンバスの描画コンテキストを取得します。次に、page.getViewport() を通じて PDF ページのサイズを取得し、次にキャンバスの高さと幅をページのサイズに設定し、最後に page.render() を使用します。 PDF ページをレンダリングするメソッド キャンバスにレンダリングします。

4. キャンバスを画像に変換する

次のコードを使用して、キャンバスを画像に変換します:

const canvas = document.getElementById('pdfCanvas');
const img = canvas.toDataURL('image/jpeg');

この例では、キャンバスを jpeg 形式の画像にエクスポートします。 。

5. 画像変換の完了

これで、PDF ファイルの最初のページが jpeg 形式の画像に変換されました。すべてのページを画像に変換する必要がある場合は、for ループを使用して各ページを順番にレンダリングし、画像に変換します。

loadingTask.promise.then(function(pdf) {
  // Get pages
  const numPages = pdf.numPages;
  let pages = [];
  for(let i=1; i<=numPages; i++){
    pages.push(i);
  }

  // Render page
  function renderPage(pageNumber) {
    pdf.getPage(pageNumber).then(function(page) {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');

      const viewport = page.getViewport({scale: 1.0});

      canvas.height = viewport.height;
      canvas.width = viewport.width;

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext).promise.then(function() {
        const imgData = canvas.toDataURL('image/png');
        console.log(`Converted page ${pageNumber} to image`);
        // do something with imgData
      });
    });
  }

  // Render all pages
  for(let i=0; i<pages.length; i++){
    renderPage(pages[i]);
  }
});

ここでは、まず PDF ファイルのページ数を取得し、次に for ループを通じて各ページをレンダリングし、jpeg 形式の画像に変換し、最後にすべての画像を zip ファイルにパッケージ化します。ダウンロードまたはアップロードします。

概要

PDF.js と JavaScript を使用すると、後続の処理のために PDF ファイルを画像に簡単に変換できます。さらに、PDF.js は PDF ファイルの検索、PDF 内のテキストの強調表示など、他の多くの機能も提供しており、PDF ファイルを処理するための非常に便利な方法を提供します。

以上がJavaScriptを使用してPDFを画像に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。