So konvertieren Sie PDF mit Javascript in ein Bild

Mit der Entwicklung des Internets ist das PDF-Format zu einem Standardformat für die gemeinsame Nutzung und den Austausch vieler Dokumente geworden. Manchmal müssen wir jedoch eine PDF-Datei zur Verarbeitung in mehrere Bilder konvertieren, was den Einsatz der Programmiersprache JavaScript erfordert.

In JavaScript können wir die PDF.js-Bibliothek verwenden, um die Funktion zum Konvertieren von PDF in Bilder zu realisieren. Im Folgenden stellen wir Ihnen die konkreten Umsetzungsschritte vor.

1. Führen Sie die PDF.js-Bibliotheksdatei ein.

In der JavaScript-Datei müssen Sie zunächst die PDF.js-Bibliotheksdatei vorstellen. Es kann lokal über CDN oder durch Herunterladen der PDF.js-Bibliotheksdatei importiert werden.

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

2. PDF-Datei herunterladen

Sie können die PDF-Datei über den folgenden Code abrufen:

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

# 🎜🎜#Rendert PDF-Dateien im Canvas

Verwenden Sie den folgenden Code, um PDF-Dateien im Canvas zu rendern:

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);
});

Hier verwenden wir

Methode zum Rendern von PDF-Seiten auf Leinwand. pdf.getPage() 方法获取PDF文件的第一页。然后使用 canvas.getContext('2d') 来获得 canvas 的绘制上下文。接着，通过 page.getViewport() 获取 PDF 页面的大小，然后将 canvas 的高度和宽度设置为页面的大小，最后使用 page.render()

Leinwand in Bild konvertieren

Verwenden Sie den folgenden Code, um die Leinwand in ein Bild umzuwandeln:

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

In diesem Beispiel , exportieren wir die Leinwand als Bild im JPEG-Format.

Bildkonvertierung abschließen

Jetzt haben wir die erste Seite der PDF-Datei in ein Bild im JPEG-Format konvertiert. Wenn Sie alle Seiten in Bilder konvertieren müssen, können Sie eine for-Schleife verwenden, um jede Seite nacheinander zu rendern und in Bilder umzuwandeln.

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]);
  }
});

Hier erhalten wir zuerst die Seitenzahl der PDF-Datei, rendern dann jede Seite durch eine for-Schleife und konvertieren sie in ein Bild im JPEG-Format und packen schließlich alle Bilder in eine ZIP-Datei herunterladen oder hochladen.

Zusammenfassung

Durch die Verwendung von PDF.js und JavaScript können wir PDF-Dateien problemlos in Bilder für die anschließende Verarbeitung konvertieren. Darüber hinaus bietet PDF.js auch viele weitere Funktionen, wie z. B. das Durchsuchen von PDF-Dateien, das Hervorheben von Text in PDF usw., und stellt so eine sehr komfortable Methode zur Verarbeitung von PDF-Dateien dar.

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie PDF mit Javascript in ein Bild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!