在添加到 jspdf 之前在循环中将图像转换为 base64 - javascript

Question

我已经对 base64 转换和 jspdf 函数的问题进行了大量研究。（PS 这是我关于 Whosebug 的第一个问题，请不要犯任何菜鸟错误）。

除了在图像转换为 base64 并放置到文档的循环完成之前生成并保存 pdf 之外，使用以下代码似乎一切正常。我添加了几个警报来检查时间。解决方案是检查循环何时完成，在继续使用 pdf 功能之前放置图像吗？如果是这样，如何？请帮忙

$(document).ready(function(){
    $("a#getdoc").click(function(){
    var doc = new jsPDF('landscape, in, legal');
    var myimages = 'img1.jpg|img2.jpg|img3.png';
    var myimgarray = myimages.split('|');

    function convertImgToBase64(url, callback, outputFormat){
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        return canvas.toDataURL("image/jpeg");
        var dataURL = canvas.toDataURL("image/jpeg");
        callback(dataURL);
            canvas = null; 
    }

for(var i = 0; i < myimgarray.length; i++)
{
  icount.count = i;
  var img = new Image();
  alert(checkoutimgarray);

  img.src = '/Portals/0/repair-images/' + myimgarray[i];
  img.onload = function(){
      newData = convertImgToBase64(img);
      alert(newData);
      doc.addImage(newData, 'JPEG', (icount * 100), 10, 70, 15); // would doc be undefined here? out of scope?
  };
}

doc.setFontSize(20);
doc.text(100, 20, "This is a test to see if images will show");
doc.save('My_file.pdf');  

  });
});

Answer 1

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

function convertImgToBase64(img, outputFormat){

    // clear canvas
    canvas.width = img.width;
    canvas.height = img.height;

    // draw image
    ctx.drawImage(img, 0, 0);

    // get data url of output format or defaults to jpeg if not set
    return canvas.toDataURL("image/" + (outputFormat || "jpeg"));
}

var images = [];

for(var i = 0; i < myimgarray.length; i++) {        
      var img = new Image();
      img.onload = function() {
          images.push({
              base64: convertImgToBase64(this),
              width: this.width,
              height: this.height
          });

          // all images loaded
          if(images.length === myimgarray.length) {
              for(var j = 0; j < images.length; j++) {             
                  doc.addImage(images[j].base64, 'JPEG', (j * 100), 10, 70, 15);
              }    
              doc.setFontSize(20);
              doc.text(100, 20, "This is a test to see if images will show");
              doc.save('My_file.pdf');
          }
      };
      img.src = '/Portals/0/repair-images/' + myimgarray[i];
}

在添加到 jspdf 之前在循环中将图像转换为 base64 - javascript

Converting images to base64 within a loop before adding to jspdf - javascript

javascript

jquery

base64

jspdf