JsPDF中异步添加图片并自动计算宽度：常见陷阱与解决方案

/**
 * 异步加载图片并将其添加到PDF文档中，同时根据指定高度自动计算宽度。
 * @param {HTMLImageElement|string} imageSrc - 图片的Base64数据或URL。
 * @param {number} x - 图片在PDF中的X坐标。
 * @param {number} y - 图片在PDF中的Y坐标。
 * @param {number} height - 图片在PDF中的目标高度。
 * @returns {Promise<object>} 返回一个Promise，解析后包含计算出的宽度和高度。
 */
function loadImageAndCalculateDimensions(imageSrc, x, y, height) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      const aspectRatio = img.width / img.height;
      const calculatedWidth = height * aspectRatio;
      resolve({ imgElement: img, width: calculatedWidth, height: height, x: x, y: y });
    };
    img.onerror = function() {
      reject(new Error(`Failed to load image: ${imageSrc}`));
    };
    img.src = imageSrc;
  });
}

// 假设 doc 是在外部某个地方定义的 jsPDF 实例
// const doc = new jsPDF();

function addImageAutoWidth(image, x, y, height) {
  const img = new Image();
  // 假设 window[image] 包含 Base64 数据
  img.src = window[image]; 

  img.onload = function() {
    const aspectRatio = img.width / img.height;
    const width = height * aspectRatio;

    // 问题：这里的 doc 对象可能未定义或不在当前作用域
    doc.addImage(img, 'PNG', x, y, width, height); 
  };
}

// 调用示例
addImageAutoWidth("img_months_01", startPos[0], startPos[1], 20);

import { jsPDF } from 'jspdf'; // 假设你使用模块导入

/**
 * 将图片添加到PDF文档中，并根据指定高度自动计算宽度。
 * 此函数处理图片的异步加载和尺寸计算。
 * @param {jsPDF} doc - jsPDF实例。
 * @param {string} imageSrc - 图片的Base64数据或URL。
 * @param {number} x - 图片在PDF中的X坐标。
 * @param {number} y - 图片在PDF中的Y坐标。
 * @param {number} height - 图片在PDF中的目标高度。
 * @param {string} format - 图片格式，例如 'PNG', 'JPEG'。
 * @returns {Promise<void>} 返回一个Promise，当图片成功添加到PDF后解析。
 */
function addImageAutoWidth(doc, imageSrc, x, y, height, format = 'PNG') {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      const aspectRatio = img.width / img.height;
      const calculatedWidth = height * aspectRatio;

      try {
        doc.addImage(img, format, x, y, calculatedWidth, height);
        resolve();
      } catch (error) {
        reject(new Error(`Failed to add image to PDF: ${error.message}`));
      }
    };
    img.onerror = function() {
      reject(new Error(`Failed to load image: ${imageSrc}`));
    };
    img.src = imageSrc;
  });
}

// 示例用法
async function generatePdfWithImage() {
  const doc = new jsPDF();
  const startPos = [10, 10]; // 示例起始位置
  const currentMonthImageBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0qrIAAAAARRJRU5ErkJggg=="; // 示例 Base64 数据

  // 添加图片
  try {
    await addImageAutoWidth(doc, currentMonthImageBase64, startPos[0], startPos[1], 20, 'PNG');

    // 所有图片添加完毕后，保存PDF
    doc.save('my_document.pdf');
    console.log('PDF generated successfully!');
  } catch (error) {
    console.error('Error generating PDF:', error);
  }
}

// 调用生成PDF的函数
generatePdfWithImage();