Javascript 从上传的图片生成DataURI并添加到PDF（JsPDF）

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

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

实时版本：

---

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

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

但下一行在“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.

---

谢谢你的详细回答，最后我用$（document）.ready函数解决了这个问题，但我不完全理解它为什么有用。我现在明白了，这是我未来的一个大教训，再次感谢你们！很高兴在这里使用$（document）.ready，您已使函数等待整个文档呈现后再执行。好发现。

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.