jsPDF addImage putting same image through entire file

Created on 2 Jan 2017  路  3Comments  路  Source: MrRio/jsPDF

Are you using the latest version of jsPDF?
Yes, downloaded the latest version from the site.

Have you tried using jspdf.debug.js?
That's the version i'm using.

Steps to reproduce
Hello i'm using a mix between jsPDF and HTML2Canvas, i use html2canvas to convert multiple divs to images and then after all those DIVS have been converted to canvas i use a For Loop to add them to my new PDF document.
Problem is that when the PDF is saved i see that in the document instead of putting each different image it displays the same one through all the document, and i don't know why. At first i thought it was because of my logic but i've done different tests and i think maybe it's a bug.

I'll share you my code

selection_117

Let me explain you how my code works:

First i create an array of objects called PdfImages, here i store all the base64 strings of each div i'm converting into canvas.

I do a $.each of another object named AgregarTabla. In this array i have all the id's of the divs i want to print in my html document, those divs are created dynamically after a database Query.

Steps to make my pdf
First a person must do a Query to a database, after that Query is done it'll generate one or a lot of DIVS depending on the results.

After those DIVS are created they can click a button which uses the function i created above, my porpuse was to convert all my DIVS into canvas, store them in an object and after that i'll use the "addImage()" function for every image saved in the array PdfImages and then store each image in a new page of my document.

But again, when i try to do that it keeps adding the first image i stored in my PdfImages object array, even when it's doing the iterations perfectly.

Notes
I know that each index of PdfImages is different because if i do on console the following line:

window.open(PdfImages[1].base); or window.open(PdfImages[2].base); or window.open(PdfImages[PdfImages.length-1].base); it opens me a tab with a different image, so i don't know why it keeps putting the same image on the document.

It works fine with text, if i use "doc.text(20,20, j )" it shows me on each page the number of the iteration where the loop is ex: ("Page one shows: 1", "Page two shows: 2", etc)

Link to PDF: https://www.docdroid.net/ew0DkT5/test-16.pdf.html

Any tips?
If you don't understand the code or my explanation feel free to ask, i'll try to explain it the best i can, i just want to know if i'm doing things right or something is missing.

Most helpful comment

Your images share one alias, named "a".

instead of

doc.addImage(PdfImages[j].base, "PNG", 0,0,500,500,"a","FAST");

try

doc.addImage(PdfImages[j].base, "PNG", 0,0,500,500,"a"+j,"FAST");

All 3 comments

No one can help? Sorry for insisting i just want to know if it's me what's causing the problem or if it's some kind of bug from jsPDF

Your images share one alias, named "a".

instead of

doc.addImage(PdfImages[j].base, "PNG", 0,0,500,500,"a","FAST");

try

doc.addImage(PdfImages[j].base, "PNG", 0,0,500,500,"a"+j,"FAST");

Yes this works. Just somehow have to do the difference in the alias (if multiple pages).
for example :

var any_var = 0;
doc.addImage(PdfImages[j].base, "PNG", 0, 0, 500,500, "a"+any_var, "FAST");

Was this page helpful?
0 / 5 - 0 ratings