Bagaimana untuk menukar pdf ke imej menggunakan javascript

Dengan perkembangan Internet, format PDF telah menjadi format standard untuk berkongsi dan bertukar-tukar banyak dokumen. Walau bagaimanapun, kadangkala kita perlu menukar fail PDF kepada berbilang imej untuk diproses, yang memerlukan penggunaan bahasa pengaturcaraan JavaScript.

Dalam JavaScript, kami boleh menggunakan perpustakaan PDF.js untuk merealisasikan fungsi menukar PDF kepada imej. Di bawah ini kami akan memperkenalkan anda kepada langkah pelaksanaan khusus.

1. Perkenalkan fail perpustakaan PDF.js

Dalam fail JavaScript, anda perlu memperkenalkan fail perpustakaan PDF.js terlebih dahulu. Ia boleh diimport secara tempatan melalui CDN atau dengan memuat turun fail perpustakaan PDF.js.

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

2. Dapatkan fail PDF

Anda boleh mendapatkan fail PDF melalui kod berikut:

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

3. Render the Fail PDF ke dalam kanvas

Render fail PDF ke dalam kanvas menggunakan kod berikut:

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

Di sini, kami menggunakan kaedah pdf.getPage() untuk mendapatkan halaman pertama PDF fail. Kemudian gunakan canvas.getContext('2d') untuk mendapatkan konteks lukisan kanvas. Seterusnya, dapatkan saiz halaman PDF melalui page.getViewport(), kemudian tetapkan ketinggian dan lebar kanvas kepada saiz halaman, dan akhirnya gunakan kaedah page.render() untuk memaparkan halaman PDF pada kanvas.

4. Tukar kanvas kepada imej

Gunakan kod berikut untuk menukar kanvas kepada imej:

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

Dalam contoh ini, kami mengeksport kanvas Satu imej dalam format jpeg.

5. Penukaran imej lengkap

Kini, kami telah menukar halaman pertama fail PDF kepada imej format jpeg. Jika anda perlu menukar semua halaman kepada imej, anda boleh menggunakan gelung for untuk memaparkan setiap halaman secara bergilir-gilir dan menukarnya kepada imej.

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

Di sini, kami mula-mula mendapat bilangan halaman fail PDF, kemudian memaparkan setiap halaman melalui gelung for dan menukarnya kepada imej dalam format jpeg, dan akhirnya membungkus semua imej ke dalam zip Muat turun atau muat naik fail.

Ringkasan

Dengan menggunakan PDF.js dan JavaScript, kami boleh menukar fail PDF kepada imej dengan mudah untuk pemprosesan seterusnya. Selain itu, PDF.js juga menyediakan banyak fungsi lain, seperti mencari fail PDF, menyerlahkan teks dalam PDF, dsb., menyediakan kaedah yang sangat mudah untuk memproses fail PDF.

Atas ialah kandungan terperinci Bagaimana untuk menukar pdf ke imej menggunakan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!