невозможно загрузить несколько изображений в jspdf

Я пытаюсь загрузить несколько изображений, которые генерируются динамически. Я хочу преобразовать эти изображения в формат PDF.

Вот код HTML:

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

и скрипт для генерации pdf с использованием 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 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> 

Ниже приведены методы, которые я пробовал:

  1. Пытался сгенерировать все изображения в теге div и генерировать PDF, используя этот тег div.
  2. Мысли изображения загружаются синхронно и решили дождаться завершения создания изображения и создания PDF. На этот раз я получаю только один PDF, но без изображений.
  3. Пытался преобразовать изображение в базу 64 и отобразить его, но не повезло

Заранее спасибо за вашу помощь.

Пожалуйста, обратитесь к этому примеру для одного изображения и так же, как вы можете сделать для нескольких изображений:

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

то вы можете просто вызвать метод загрузки:

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