자바스크립트를 사용하여 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') 来获得 canvas 的绘制上下文。接着，通过 page.getViewport() 获取 PDF 页面的大小，然后将 canvas 的高度和宽度设置为页面的大小，最后使用 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 파일을 처리하는 데 매우 편리한 방법을 제공합니다.

위 내용은 자바스크립트를 사용하여 PDF를 이미지로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!