imansible caricare più immagini in jspdf

Sto cercando di caricare più immagini che generano dynamicmente. Voglio convertire quelle immagini in formato PDF.

Ecco il codice HTML:

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

e lo script per generare pdf usando jspdf è:

 <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 arrays 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; ?>&ithemesds=<?php echo $item->ithemesd; ?>&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> 

Di seguito sono riportti i methods che ho provato:

  1. Ho cercato di generare mantenere tutte le immagini in un tag div e generare PDF usando quel tag div.
  2. Le immagini di pensiero vengono caricate in modo sincrono e decidono di attendere fino al completamento della creazione dell'image e di generare PDF. Questa volta ricevo solo un singolo PDF ma senza immagini.
  3. Ho cercato di convertire l'image in base 64 e visualizzarla, ma senza fortuna

Grazie in anticipo per il vostro aiuto.

Si prega di fare riferimento a questo esempio per un'image e allo stesso modo in cui si può fare per più immagini:

  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,/, ""); } 

quindi puoi semplicemente call il metodo di caricamento:

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