pdf mit mehrere Seiten in ein Image konvertieren

Eine ganz andere Alternative besteht darin, die Bilder clientseitig im Browser zu erzeugen. Bei textlastigen Bildern ist dann das Datenvolumen, das herunter geladen werden muss geringer und man kann die Abmessungen der erzeugten Bilder an das Browserfenster und die Auflösung anpassen.
pdfjs erledigt das und wird auch von Firefox für die Anzeige von PDFs benutzt.
Hier eine Demo:
Code:
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>PDFJS Demo</title>
    <script src="js/pdf.min.js" type="module"></script>
    <script src="js/pdf.worker.js" type="module"></script>
</head>

<body>
    <section id="wrapper-for-pdf"></section>
    <script type="module">
        pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
        const loadingTask = pdfjsLib.getDocument('pdf/example.pdf');
        loadingTask.promise.then(function (pdf) {
            console.log('PDF loaded'.pdf);
            const
                numPages = pdf.numPages,
                wrapper = document.getElementById('wrapper-for-pdf');
            // Fetch and render all pages
            for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
                pdf.getPage(pageNumber).then(function (page) {
                    console.log('Page loaded');
                    const scale = 1,
                        viewport = page.getViewport({ scale: scale }),
                        // Prepare canvas using PDF page dimensions
                        canvas = document.createElement('canvas'),
                        context = canvas.getContext('2d'),
                        resolution = 2;
                    canvas.height = resolution * viewport.height; //actual size
                    canvas.width = resolution * viewport.width;
                    canvas.style.width = '100%';
                    canvas.style.maxWidth = viewport.width + 'px';

                    // Prepare object needed by render method
                    const renderContext = {
                        canvasContext: context,
                        viewport: viewport,
                        transform: [resolution, 0, 0, resolution, 0, 0] // force it bigger size
                    };

                    // Render PDF page
                    page.render(renderContext);
                    wrapper.append(canvas);
                }, function (reason) {
                    // PDF loading error
                    console.error(reason);
                });
            }
        });
    </script>
</body>

</html>
 
Zurück