Question

我已经研究过base64转换和jspdf函数的问题了。（PS这是我关于stackoverflow的第一个问题，请不要错过任何新手错误）。

所有似乎都可以使用下面的代码正常工作，除了在循环之前生成并保存pdf，其中图像转换为base64并放置到文档中。我添加了几个警报来检查时间。解决方案是检查循环何时完成，在继续使用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

1 个答案: