Insertar imagen a pdf usando JavaScript

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

insertar 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'); 
            var imgData = imginfo; 
            
            doc.addImage(imgData, 'JPG', 25, 35, 150, 150, 'Logo'); 
           
            doc.output('dataurlnewwindow', {filename: 'newpdf.pdf'}); 
        };

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.

The Digital Mike