Agregar imagen a pdf usando JavaScript

export imagen to pdf

Hola, en este tutorial vamos a ver como podemos Agregar imagen a pdf usando JavaScript con la librería jspdf.

Agregar imagen a pdf usando JavaScript

Para comenzar, vamos crear una pagina nueva en la que vamos a agregar la librería jspdf, la cual usaremos para exportar el contenido de la imagen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<!--    Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
    
</body>
</html>

Subir imagen para exportar

Vamos a agregar un titulo y un input para poder subir la imagen que queremos exportar. Para el input nos vamos a asegurar de que solo acepte imágenes jpg, para que solo sean subida imagenes al documento. Ademas, vamos a incluir el botón que vamos a utilizar para ejecutar la función de exportar documento.

<section style="text-align:center;">
        <div>
            <h1>EXPORT IMAGE TO PDF</h1>
        </div>
        <div style="margin:15px auto;">
            <input type="file" id="inpimg" accept="image/jpeg" />
        </div>       
        <div style="margin:15px auto;">
            <button id="btnpdfout">Create PDF</button>
        </div>
    </section>

Con esta parte, ya tenemos lo que necesitamos, un botón para subir la imagen y otro mas para exportar a pdf.

Exportar imagen usando javascript

Ahora vamos a crear las funciones que necesitamos para exportar el contenido. Para comenzar vamos a declarar las variables necesarias.

<script>
        var inpimg = document.getElementById('inpimg'),
            imginfo,
            btnpdfout = document.getElementById('btnpdfout');
        

    </script>

Debido a que necesitamos exportar la imagen a pdf, primero necesitamos convertir la imagen a base 64. Para esto vamos a agregar al input de la imagen un evento que estará atento al cualquier cambio. Dentro del evento vamos a convertir la imagen a Base64.

inpimg.onchange = function(){
            let file = this.files[0];
            let reader = new FileReader();
            reader.onloadend = function(){
                imginfo = reader.result;
            }
            reader.readAsDataURL(file);
        };

Una vez tenemos nuestra imagen codificada, vamos a exportarla. Al botón de exportar vamos a agregarle un evento onclick con la función siguiente:

btnpdfout.onclick = function(){
            var doc = new jsPDF('p', 'pt', 'letter'); /*Declaramos un nuevo doc con especificaciones del documento */
            var imgData = imginfo; /*asignamos la imagen codificada a imgData */
            
            doc.addImage(imgData, 'JPG', 25, 35, 150, 150, 'Logo'); /*agregramos la imagen al documento*/
           
            doc.output('dataurlnewwindow', {filename: 'newpdf.pdf'}); /*exportamos como un documento pdf con nombre newpdf.pdf y lo mostramos en una ventana nueva del navegador */
        };

Con esto ya podemos exportar una imagen a un documento pdf, la cual se mostrara con unas dimensiones de 150 pixeles de ancho por 150 pixeles de alto, a unos 25 pixeles del borde izquierdo y 35 pixeles del border superior.

Espero les sea de utilidad este tutorial, aunque aun no hallamos terminado con lo que podemos aprender aqui, por el momento un descanso para luego vernos en la próxima entrada, donde aprenderemos como agregar una pagina al documento con contenido nuevo.