Cómo Convertir la Primera Página de un PDF a Imagen

En este tutorial, aprenderás cómo crear un sencillo conversor en línea que te permitirá cargar un archivo PDF y convertir su primera página en una imagen. Utilizaremos PHP para el procesamiento del formulario y la conversión, y la librería spatie/pdf-to-image para llevar a cabo la conversión.

Paso 1: Preparación del Entorno

Configura tu entorno: Asegúrate de tener un servidor web y PHP instalados en tu sistema.

Crea una Carpeta: Crea un nuevo directorio en tu servidor web y nómbralo como desees. Todos los archivos del tutorial estarán en este directorio.

Paso 2: Creación del Formulario

Crea un archivo llamado index.php en el directorio que creaste. Este archivo contendrá un formulario que permitirá a los usuarios cargar un archivo PDF.

...

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            formulario
        </button>
    
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="convert.php" method="post" enctype="multipart/form-data">
                            <div class="mb-3">
                                <label for="titulo" class="form-label">Libro</label>
                                <input type="file" class="form-control" id="titulo" name="titulo" accept=".pdf">
                                <div id="previewContainer"></div>
                            </div>
                            <div class="mb-3">
                                <label for="tituloImagen" class="form-label">Imagen</label>
                                <input type="text" class="form-control" id="tituloImagen" name="tituloImagen">
                            </div>
                            <button id="generarDescargar">Guardar Imagen</button>
                        </form>
                    </div>
    
                </div>
            </div>
        </div>
    

Explicación: Creamos un formulario que envía los datos al archivo convert.php usando el método POST. El formulario contiene un campo para seleccionar un archivo PDF.

Paso 3: Conversión del PDF a Imagen

Crea un archivo llamado convert.php en el mismo directorio. Este archivo se encargará de procesar la conversión del PDF a imagen.

        <script>
        document.getElementById("titulo").addEventListener("change", function(event) {
            const file = event.target.files[0];
            const fileReader = new FileReader();
    
            fileReader.onload = function() {
                const typedArray = new Uint8Array(this.result);
    
                pdfjsLib.getDocument(typedArray).promise.then(function(pdfDocument) {
                    pdfDocument.getPage(1).then(function(page) {
                        const canvas = document.createElement("canvas");
                        const context = canvas.getContext("2d");
                        const viewport = page.getViewport({
                            scale: 0.2
                        });
    
                        canvas.width = viewport.width;
                        canvas.height = viewport.height;
    
                        const renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
    
                        // Renderizar la página en el lienzo
                        page.render(renderContext).promise.then(function() {
                            const previewContainer = document.getElementById(
                                "previewContainer");
                            previewContainer.innerHTML = ""; // Limpiar el contenedor
                            previewContainer.appendChild(canvas);
    
                            // Obtener el nombre del archivo PDF
                            const pdfFileName = file.name;
    
                            // Mostrar el título de la imagen en el campo de entrada
                            const tituloImagenInput = document.getElementById(
                                "tituloImagen");
                            tituloImagenInput.value = pdfFileName.replace(/\.[^/.]+$/,
                                "") + ".png";
    
                            // Guardar automáticamente la imagen en el servidor
                            guardarImagen();
                        });
                    });
                });
            };
    
            fileReader.readAsArrayBuffer(file);
        });
     </script>
    

Explicación: En este archivo, procesamos el formulario que se envió desde index.php. Usamos la librería spatie/pdf-to-image para cargar el archivo PDF, seleccionar la primera página y guardarla como una imagen llamada output.jpg. Luego, mostramos la imagen generada en la página.

Paso 4: Descargar las Librerías

En la cabecera del documento coloca este CDN o descarga uno mas actual

        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
    

¡Felicidades! Ahora tienes todo en su lugar para convertir la primera página de un PDF a una imagen. Abre tu navegador y visita http://localhost/tu-directorio/index.php para ver y probar tu conversor en acción.

Ir al indice

---