html2canvas only renders the same image

Question

ticket_list = [0, 1, 2];

function genPDF(){
    var deferreds = [];
    var doc = new jsPDF();

    for (let i = 0; i < ticket_list.length; i++) {
        var deferred = $.Deferred();
        deferreds.push(deferred.promise());
        genCanvas(i, doc, deferred);
    }

    $.when.apply($, deferreds).then(function () { // executes after adding all images
        doc.save('test.pdf');
    });
}

function genCanvas(i, doc, deferred){
    html2canvas(document.getElementById("div"+i), {
        onrendered: function(canvas){
            var img = canvas.toDataURL();
            doc.addImage(img, 'JPEG', 0, 10, 350, 125, 'center');
            doc.addPage();

            deferred.resolve();
        }
    });
}

$('#download').click(function(){
    genPDF();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
     <p>A</p>
</div>

<div id="div2">
     <p>B</p>
</div>

<div id="div3"> 
     <p>C</p>
</div>

There appears no error when I run this script, but the pdf file is strange.

It loops 3 times but only the same div gets rendered 3 times.

I don't know what should I do.

Anybody help me.

Answer 1

황준필, From jdPDF addImage Doc

addImage(imageData, format, x, y, width, height, alias, compression, rotation)

The seventh parameter of addImage is alias which you assign 'center', its Description is

alias of the image (if used multiple times)

So if literal string was given, same imageData always be added into doc,

Try use a variable like below or just ignore this parameter.

html2canvas(document.getElementById('div' + i), {
    onrendered: function(canvas){
        var img = canvas.toDataURL();
        doc.addImage(img, 'JPEG', 0, 10, 350, 125, 'div' + i);
        doc.addPage();

        deferred.resolve();
    }
});