使用JsPDF自定义自动宽高比函数添加图片至PDF不显示

核心原因 #

img.onload是异步执行的事件回调。当你调用addImageAutoWidth后，代码会立刻继续执行后续的PDF生成、保存等操作；而图片加载完成触发onload回调时，PDF可能已经被生成完毕，此时doc.addImage的操作根本没被纳入最终的PDF文档中。

而直接调用doc.addImage能正常显示，是因为你传入的base64图片数据已经是就绪状态，addImage是同步执行的，操作会被立即应用到PDF实例上。

修复方案 #

方案1：利用base64特性直接计算宽高（无需异步加载） #

既然你的图片是存储在全局变量中的base64数据，完全可以跳过Image对象的异步加载步骤，直接通过Canvas解析图片宽高，同步计算比例：

function addImageAutoWidth(imageKey, x, y, height) {
  const base64Data = window[imageKey];
  const img = new Image();
  img.src = base64Data;
  
  // 用Canvas同步获取图片宽高（base64数据无需等待网络加载，可立即获取）
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  
  const aspectRatio = canvas.width / canvas.height;
  const width = height * aspectRatio;
  
  doc.addImage(base64Data, 'PNG', x, y, width, height);
}

方案2：将函数改为异步，确保图片加载后再处理PDF #

如果必须保留onload逻辑，可将函数改为返回Promise，调用时等待加载完成后再执行PDF的保存操作：

function addImageAutoWidth(imageKey, x, y, height) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = window[imageKey];
    
    img.onload = function() {
      const aspectRatio = img.width / img.height;
      const width = height * aspectRatio;
      
      doc.addImage(img, 'PNG', x, y, width, height);
      resolve();
    };
  });
}

// 调用方式（需在async函数中）
async function generatePDF() {
  // 其他PDF操作...
  await addImageAutoWidth("img_months_" + currentMonth, startPos[0], startPos[1], 20);
  // 确保图片添加完成后再保存PDF
  doc.save('output.pdf');
}

补充说明 #

你之前的代码中还有一个小问题：width变量没有用let或const声明，会变成全局变量，可能引发意外的变量污染，修复时记得补上声明。

内容的提问来源于stack exchange，提问作者Tobias Glaus