从上传的图片生成 DataURI 并添加到 PDF (JsPDF)

Question

我正在将图片上传到服务器，然后我的脚本将其转换为数据 URI。一切正常，在 setTimeOut 函数中，警报显示 dataURI 很好，但下一行中的 addImage 函数似乎没有将图片添加到 PDF 中。最后一行中的 addImage 函数添加另一个图像就好了。

我已经尝试了一切，不明白为什么 setTimeOut 块内的 addImage 函数不会将图像添加到 PDF。

直播版：http://www.course0001.com/fiverr/lifemax/004/

if( document.getElementById("field_file").files.length == 0 ){
doc.addImage(logoData, 'JPEG', 65, 35, 87, 27); // Add logo

} else {

  let fnm = $('input[type=file]')[0].files[0].name;
  let fileExtension = getExtension(fnm);

  var logo = null;
  getDataUri('/fiverr/lifemax/004/backend/logos/logo-'+uniqueFileName+'.'+fileExtension, function(dataUri) {
    logo = dataUri;
    console.log("logo=" + logo);
  });

  function getDataUri(url, cb)
  {
    var image = new Image();
    image.setAttribute('crossOrigin', 'anonymous');

    image.onload = function () {
      var canvas = document.createElement('canvas');
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;

      //next three lines for white background in case png has a transparent background
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = '#fff';  /// set white fill style
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      canvas.getContext('2d').drawImage(this, 0, 0);
      cb(canvas.toDataURL('image/jpeg'));
    };
    image.src = url;
  }

  setTimeout(function(){
    alert(logo); // This displays the data URI fine
    doc.addImage(logo, 'JPEG', 65, 35, 87, 27); // This never adds the image, however the alert displays the dataURI fine. 
  }, 3000);

}

doc.addImage(coverData, 'JPEG', 10, 95, 190, 190); // This adds the image just fine. Data URI is stored in a variable as string. 

Answer 1

jsPDF 是一个异步函数，这意味着它不会等待您之前的一组行完全执行。

当您在“setTimeout”中调用 addImage 时（同样会在 3000 毫秒后执行而无需等待依赖项完全加载），徽标可能尚未呈现。因此，白色图像。

但下一行在“coverData”完全呈现之前不会被执行，因此您可以在 PDF 上看到它。

你可以试试下面的代码来做同步。

if( document.getElementById("field_file").files.length == 0 ){
doc.addImage(logoData, 'JPEG', 65, 35, 87, 27); // Add logo

} else {

  let fnm = $('input[type=file]')[0].files[0].name;
  let fileExtension = getExtension(fnm);

  var logo = null;
  getDataUri('/fiverr/lifemax/004/backend/logos/logo-'+uniqueFileName+'.'+fileExtension, function(dataUri) {
    logo = dataUri;
    console.log("logo=" + logo);
    setLogo(logo);
  });

  function getDataUri(url, cb)
  {
    var image = new Image();
    image.setAttribute('crossOrigin', 'anonymous');

    image.onload = function () {
      var canvas = document.createElement('canvas');
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;

      //next three lines for white background in case png has a transparent background
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = '#fff';  /// set white fill style
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      canvas.getContext('2d').drawImage(this, 0, 0);
      cb(canvas.toDataURL('image/jpeg'));
    };
    image.src = url;
  }

  function setLogo(logo){
    alert(logo); // This displays the data URI fine
    doc.addImage(logo, 'JPEG', 65, 35, 87, 27); // This never adds the image, however the alert displays the dataURI fine. 
  };

}

doc.addImage(coverData, 'JPEG', 10, 95, 190, 190); // This adds the image just fine. Data URI is stored in a variable as string.