So konvertieren Sie PDF mit Javascript in ein Bild-Front-End-Fragen und Antworten-php.cn

So konvertieren Sie PDF mit Javascript in ein Bild

PHPz

Freigeben： 2023-04-24 15:15:51

Original

6388 Leute haben es durchsucht

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.

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>

Nach dem Login kopieren

PDF-Datei herunterladen

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Hier verwenden wir

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

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!