How to convert pdf to image using javascript

With the development of the Internet, PDF format has become a standard format for sharing and exchanging many documents. However, sometimes we need to convert a PDF file into multiple images for processing, which requires the use of JavaScript programming language.

In JavaScript, we can use the PDF.js library to realize the function of converting PDF into images. Below we will introduce you to the specific implementation steps.

1. Introduce the PDF.js library file

In the JavaScript file, you first need to introduce the PDF.js library file. It can be imported locally through CDN or by downloading the PDF.js library file.

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

2. Get the PDF file

You can get the PDF file through the following code:

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

3. Render the PDF file into canvas

Use the following code to render the PDF file into canvas:

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

Here, we use the pdf.getPage() method to get the first page of the PDF file. Then use canvas.getContext('2d') to obtain the canvas's drawing context. Next, get the size of the PDF page through page.getViewport(), then set the height and width of the canvas to the size of the page, and finally use the page.render() method to render the PDF page Render to canvas.

4. Convert canvas to image

Use the following code to convert canvas to image:

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

In this example, we export canvas to jpeg format image.

5. Complete image conversion

Now, we have converted the first page of the PDF file into a jpeg format image. If you need to convert all pages into images, you can use a for loop to render each page in turn and convert it into 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]);
  }
});

Here, we first get the number of pages of the PDF file, then render each page through a for loop and convert it into an image in jpeg format, and finally package all the images into a zip file. Download or upload.

Summary

By using PDF.js and JavaScript, we can easily convert PDF files into images for subsequent processing. In addition, PDF.js also provides many other functions, such as searching PDF files, highlighting text in PDF, etc., providing a very convenient method for processing PDF files.

The above is the detailed content of How to convert pdf to image using javascript. For more information, please follow other related articles on the PHP Chinese website!