Archivo PDF para imagen JPG o PNG

En esta ocasion voy a mostrar como se convierte un pdf a imagen jpg o png y la guardamos en una carpeta.

el primero paso es preparar el proyecto

Para eso creamos nuestro proyecto con un fichero llamado pdf_imagen.php

Se prefieran lo podremos hacer con index.php

Seguidamiente creamos otro fichero con el nombre guardar_imagen.php

Se puede hacer poniento el codigo php arriba de todo, dejando a llamada al fichero anterior en blanco, solo con dos comillas.

En este punto tendriamos dos archivos. uno index.php o en alternativa pdf_imagen.php

El otro fichero se llamaria guardar_imagen.php

Por ultimo creariamos una carpeta onde guardar nuestras imagens, la cual le pondriamos el nombre de imagens_varias

Librerias

Para que funcione tendremos que descargar unas bibliotecas de Mozilla que estan en GitHub

La biblioteca PDF.js se puede descargar desde el sitio oficial de PDF.js en GitHub. PDF.js es una biblioteca de código abierto desarrollada por Mozilla y está diseñada para trabajar con documentos PDF en navegadores web utilizando JavaScript.

Para descargar PDF.js, sigue estos pasos:

Visita el repositorio de PDF.js en GitHub:
Haz clic en el botón verde "Code" en la esquina derecha superior del repositorio.
Selecciona la opción "Download ZIP" para descargar el código fuente completo de PDF.js como un archivo ZIP.
Una vez que hayas descargado el archivo ZIP, descomprímelo en tu proyecto

Dentro de la carpeta descomprimida, encontrarás varios archivos y carpetas, incluidos los archivos pdf.js, pdf.worker.js, entre otros. Estos archivos son los que se incluyen en la página HTML para cargar y renderizar los archivos PDF.

Una vez que hayas descargado y descomprimido la biblioteca PDF.js, asegúrate de que los archivos pdf.js y pdf.worker.js estén ubicados en la misma carpeta que tu archivo HTML o actualiza las rutas en el código HTML para que apunten a la ubicación correcta de los archivos.

...

index.php

Nel archivo index.php ponemos el seguiente codigo:

        <!DOCTYPE html>
        <html>
        <head>
          <title>Vista previa de PDF</title>
        </head>
        <body>
          <h1>Vista previa de PDF</h1>
        
          <input type="file" id="pdfFileInput" accept="application/pdf">
          <div id="previewContainer"></div>
        
          <button onclick="guardarImagen()">Guardar Imagen</button>
        
          <script src="build/pdf.js"></script>
          <script src="build/pdf.worker.js"></script>
          <script>
            let imageData; // Variable global para almacenar los datos de la imagen generada
        
            document.getElementById("pdfFileInput").addEventListener("change", function(event) {
              const file = event.target.files[0];
        
              const reader = new FileReader();
              reader.onload = function(e) {
                const arrayBuffer = e.target.result;
        
                // Crear un objeto Blob a partir del ArrayBuffer del PDF
                const blob = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' });
        
                // Crear una URL del objeto Blob
                const url = URL.createObjectURL(blob);
        
                // Crear un objeto PDFJS para cargar y analizar el PDF
                const pdfjsLib = window['pdfjs-dist/build/pdf'];
                pdfjsLib.getDocument(url).promise.then(function(pdf) {
                  // Cargar la página 1 del PDF
                  pdf.getPage(1).then(function(page) {
                    const scale = 0.5;
                    const viewport = page.getViewport({ scale: scale });
        
                    // Crear un elemento canvas para mostrar la vista previa
                    const canvas = document.createElement("canvas");
                    const context = canvas.getContext("2d");
                    canvas.width = viewport.width;
                    canvas.height = viewport.height;
        
                    // Renderizar la página en el canvas
                    const renderContext = {
                      canvasContext: context,
                      viewport: viewport
                    };
                    page.render(renderContext).promise.then(function() {
                      // Agregar el canvas al contenedor de vista previa
                      const previewContainer = document.getElementById("previewContainer");
                      previewContainer.innerHTML = "";
                      previewContainer.appendChild(canvas);
        
                      // Obtener los datos de la imagen generada como Base64
                      imageData = canvas.toDataURL("image/png");
                    });
                  });
                });
              };
        
              reader.readAsArrayBuffer(file);
            });
        
            function guardarImagen() {
              if (imageData) {
                const fileInput = document.getElementById("pdfFileInput");
                const file = fileInput.files[0];
                const nombreArchivo = file.name.replace(".pdf", ".png"); // Obtener el nombre del archivo PDF y cambiar la extensión a ".png"
        
                // Crear un objeto FormData para enviar la imagen al servidor
                const formData = new FormData();
                const imageFile = dataURItoBlob(imageData);
                formData.append("imagen", imageFile, nombreArchivo);
        
                // Realizar una petición POST al servidor para guardar la imagen
                const request = new XMLHttpRequest();
                request.open("POST", "guardar_imagen.php");
                request.send(formData);
              }
            }
        
            // Función auxiliar para convertir una cadena Base64 a un objeto Blob
            function dataURItoBlob(dataURI) {
              const byteString = atob(dataURI.split(",")[1]);
              const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
              const ab = new ArrayBuffer(byteString.length);
              const ia = new Uint8Array(ab);
              for (let i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
              }
              return new Blob([ab], { type: mimeString });
            }
          </script>
        </body>
        </html>

Explicación del código:

El código tiene un input del tipo file donde el usuario puede seleccionar un archivo PDF para cargarlo. Cuando se selecciona un archivo, se dispara el evento change, y se inicia la función para cargar el PDF y generar una vista previa.
La función dataURItoBlob es una función auxiliar que convierte una cadena Base64 (la imagen en formato PNG) en un objeto Blob, necesario para enviar la imagen al servidor.
Cuando se selecciona un archivo PDF, se inicia la función que carga y procesa el PDF: Se lee el contenido del archivo PDF como un ArrayBuffer usando el objeto FileReader.
- Se crea un objeto Blob a partir del ArrayBuffer del PDF y se genera una URL para poder cargar el PDF usando la biblioteca PDF.js.
- Se utiliza la biblioteca PDF.js para obtener la primera página del PDF, y luego se renderiza en un elemento canvas para mostrar la vista previa.
- La imagen generada se convierte a Base64 y se almacena en la variable imageData.
Después de cargar y mostrar la vista previa de la página PDF, el código tiene un botón llamado "Guardar Imagen" que, cuando se hace clic, dispara la función guardarImagen.
La función guardarImagen verifica si hay datos de imagen disponibles en la variable imageData, y si es así, realiza una solicitud POST al servidor para guardar la imagen.
- Se crea un objeto FormData y se adjunta la imagen como un Blob en el formulario.
- Se utiliza un objeto XMLHttpRequest para realizar la solicitud POST al servidor con el formulario que contiene la imagen.
- La URL para la solicitud POST está configurada como "guardar_imagen.php", lo que sugiere que el servidor debe tener un script PHP llamado guardar_imagen.php que procesa y guarda la imagen en el servidor.

En resumen, después de seleccionar un archivo PDF, se generará una vista previa de la primera página del PDF en un elemento canvas. Luego, si se hace clic en el botón "Guardar Imagen", se enviará esa vista previa al servidor para que se pueda guardar. La ubicación donde se guardará la imagen dependerá del código en el servidor y, específicamente, del script guardar_imagen.php que manejará la solicitud POST y el almacenamiento de la imagen en el servidor.

Codigo de Guardar_imagen.php

    <?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["imagen"])) {
  $imagen = $_FILES["imagen"];
  $nombreArchivo = "imagens_varias/" . $imagen["name"]; // Nombre y ruta del archivo de salida en la carpeta "output"
  move_uploaded_file($imagen["tmp_name"], $nombreArchivo);
}
?>

Nota: este es el archivo php que guarda la imagen en la carpeta imagens_varias

podemos cambiar de carpeta, asi como a llamada a este fichero dejala en blanco y poner este coddigo en index.php

Ir al indice