Ya hemos hablado muchas veces de la librería jsPDF, la cual es una excelente librería para crear PDFs en nuestros proyectos web, ahora veamos como agregar una imagen a un PDF generado con jsPDF.
Tenemos varios artículos sobre jspdf en este sitio web, vamos a tomar como base el primer ejemplo. Como crear un PDF con JSPDF aquí podrán ver como descargar la librería y lo básico de la librería jspdf.
Una vez descargado, que no es difícil, vamos a incluir el archivo jspdf.min.js al documento HTML que estemos usando y listo, ya podemos usar la librería.
Crear un PDF y Agregar una Imagen
Para crear un PDf y agregar imágenes con la librería JSPDF usaremos el siguiente código.
<script>
var pdf = new jsPDF();
pdf.text(20,20,"Agregar imagenes a un PDF!");
/// Codigo para agregar una imagen
var image1 = new Image();
image1.src = "imagen.jpg"; /// URL de la imagen
pdf.addImage(image1, 'JPEG', 25, 30, 170, 180); // Agregar la imagen al PDF (X, Y, Width, Height)
/////
pdf.save("mipdf.pdf");
</script>Y asi es como podemos agregar una imagen al PDF, podemos modificar los valores de las posiciones X,Y y las medidas de la imagen Width y Height
En algunas ocasiones el PDF no se va a generar o descargar hasta que la imagen no cargue, en caso de que la imagen este muy pesada, en ese caso debemos esperar a que cargue la imagen y para ello usaremos el método onload de la imagen.
<script>
var pdf = new jsPDF();
pdf.text(20,20,"Agregar imagenes a un PDF!");
/// Codigo para agregar una imagen
var image1 = new Image();
image1.src = "imagen.jpg"; /// URL de la imagen
pdf.addImage(image1, 'JPEG', 25, 30, 170, 180); // Agregar la imagen al PDF (X, Y, Width, Height)
/////
image1.onload = function(){
pdf.save("mipdf.pdf");
}
</script>Y listo asi podremos agregar una imagen a nuestro PDF.