Comment convertir un pdf en image en utilisant javascript

Avec le développement d'Internet, le format PDF est devenu un format standard pour partager et échanger de nombreux documents. Cependant, nous devons parfois convertir un fichier PDF en plusieurs images pour le traitement, ce qui nécessite l'utilisation du langage de programmation JavaScript.

En JavaScript, nous pouvons utiliser la bibliothèque PDF.js pour réaliser la fonction de conversion de PDF en images. Ci-dessous, nous vous présenterons les étapes spécifiques de mise en œuvre.

1. Introduire le fichier de bibliothèque PDF.js

Dans le fichier JavaScript, vous devez d'abord introduire le fichier de bibliothèque PDF.js. Il peut être importé localement via CDN ou en téléchargeant le fichier de bibliothèque PDF.js.

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

2. Obtenir un fichier PDF

Vous pouvez obtenir un fichier PDF en suivant le code :

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

3. Rendre le fichier PDF dans le canevas

Utilisez le code suivant pour rendre le fichier PDF dans le canevas :

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

Ici, nous utilisons pdf.getPage() 方法获取PDF文件的第一页。然后使用 canvas.getContext('2d') 来获得 canvas 的绘制上下文。接着，通过 page.getViewport() 获取 PDF 页面的大小，然后将 canvas 的高度和宽度设置为页面的大小，最后使用 page.render() La méthode restitue les pages PDF sur le canevas.

4. Convertir le canevas en image

Utilisez le code suivant pour convertir le canevas en image :

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

Dans cet exemple, nous exportons le canevas en image au format jpeg.

5. Conversion complète de l'image

Maintenant, nous avons converti la première page du fichier PDF en une image au format jpeg. Si vous devez convertir toutes les pages en images, vous pouvez utiliser une boucle for pour afficher chaque page tour à tour et la convertir en images.

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

Ici, nous obtenons d'abord le nombre de pages du fichier PDF, puis restituons chaque page via une boucle for et la convertissons en une image au format jpeg, et enfin nous pouvons regrouper toutes les images dans un fichier zip pour le téléchargement ou télécharger.

Résumé

En utilisant PDF.js et JavaScript, nous pouvons facilement convertir des fichiers PDF en images pour un traitement ultérieur. De plus, PDF.js fournit également de nombreuses autres fonctions, telles que la recherche de fichiers PDF, la surbrillance de texte dans un PDF, etc., offrant ainsi une méthode très pratique pour traiter les fichiers PDF.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!