使用jsPDF生成PDF时遇getJpegSize无法获取图片尺寸错误求助

错误原因分析 #

1. 图片格式不匹配：你传入的是JPG图片，但addImage方法里指定的格式是png，格式不匹配导致jsPDF无法正确解析图片尺寸。
2. 图片未完成加载就调用API：直接设置img.src后立刻执行addImage，此时图片还在加载过程中，jsPDF无法获取到图片的有效尺寸。
3. 使用过时的jsPDF版本：你用的0.9.0rc1是测试版，对图片处理的兼容性和稳定性都不如正式版。

修正后的代码 #

JavaScript部分

function generate() {
  var doc = new jsPDF();
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  
  var img = new Image();
  img.src = 'https://imgv3.fotor.com/images/videoImage/pixelate-Minions-image.jpg';
  
  // 等待图片加载完成后再执行PDF操作
  img.onload = function() {
    // 把格式从png改成jpeg，匹配图片实际格式
    doc.addImage(img, 'jpeg', 10, 78, 12, 15);
    doc.addPage();
    doc.text(20, 20, 'Do you like that?');
    doc.save('Test.pdf');
  };
}

HTML部分

<button id="btnDownload" onclick="generate()"> Download PDF </button>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<!-- 替换为稳定版jsPDF -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

关键改动说明 #

• 新增img.onload回调，确保图片完全加载后再调用addImage，避免因图片未就绪导致的尺寸获取失败。
• 将addImage的格式参数从png改为jpeg，与图片实际格式一致。
• 升级jsPDF到2.5.1稳定版，提升图片处理的兼容性和可靠性。

内容的提问来源于stack exchange，提问作者Naren Verma