unable to load multiple images in jspdf

问题

I am trying to load multiple images which generates dynamically. I want to convert those images into PDF format.

Here is the HTML code:

<html>
<body>
   <input type='submit' id='test' style='align:center' value='Generate'>
</body>
</html>

and the script to generate pdf using jspdf is:

<script>
    window.onload = function(){
      var t = document.getElementById("test"); 
      t.addEventListener("click", sayHi, false);
      function sayHi(){
        var getImageFromUrl = function(url, callback) {
            var img = new Image();

            img.onError = function() {
                alert('Cannot load image: "'+url+'"');
            };
            img.onload = function() {
                callback(img);
            };
            img.src = url;
        }
    var doc = new jsPDF();  
    var length = <?php echo count($items); ?>; /* $items id from php which is an array of items */
    var cnt=0; /* using this variable to get the end of the loop */
    <?php
        foreach($items as $item)
        {?>
            cnt++;
            getImageFromUrl('http://localhost:800/prod/chart.php?period=<?php echo $timeperiod; ?>&stime=<?php echo $startingtime; ?>&itemids=<?php echo $item->itemid; ?>&type=0&updateProfile=1&profileIdx=web.item.graph&width=1222&screenid=&curtime=1442486527893', function(imgData) {
                doc.addImage(imgData, 'JPEG', 10, 10, 150, 75); 
                /* Initiall tried here to save pdf file and as a result n number of pdf's are downloading with same image */
                /* doc.save('out.pdf'); */

            }
            );

        <?php 
        }
         ?>
     if(cnt==length)
            {
                /* after trying in for loop i tried here as a result i got only one pdf but with out images */
                doc.save('out.pdf');
            }
      } 
}
</script>

Below are the methods I have tried:

Tried to generate keep all the images in a div tag and generate PDF using that div tag.
Thought images are loaded synchronously and decided to wait till the image creation is completed and generate PDF. This time I am getting only a single PDF but with no images.
Tried to convert image into base 64 and display it, but no luck

Thanks in advance for your help.

回答1:

Please refer this example for one image and same way you can do for multiple images:

 var img = new Image();

img.onload = function () {
    var dataURI = getBase64Image(img);
    return dataURI;

}
img.src = "../Images/UW_DriveLogo.jpg";

function getBase64Image(img) {

    var canvas = document.createElement("canvas");

    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/jpeg");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

}

then you can simply call load method:

 doc.addImage(img.onload(), 'PNG', doc.internal.pageSize.width - 75, 0, 75, 75);

来源：https://stackoverflow.com/questions/32667900/unable-to-load-multiple-images-in-jspdf

标签

php

html

pdf

jspdf