jsPDF添加JPEG图片报Supplied data is not JPEG错误求助

这个报错本质是jsPDF拿到的传入数据不符合它要求的JPEG格式标准，按以下优先级排查修复：

• 首先修正传参错误：你当前代码直接把new Image()创建的DOM实例传给addImage方法，jsPDF不识别这个对象类型。addImage方法接收的合法入参是图片的dataURL字符串、base64编码数据或ArrayBuffer格式的图片二进制内容，直接传Image实例必然触发格式校验错误。
• 校验图片真实格式：不要以文件后缀名判断图片格式，很多后缀为.jpg的文件实际是PNG、WebP甚至损坏的文件。可以通过两种方式校验：
  1. 打开浏览器开发者工具的网络面板，找到对应图片的请求，查看响应头的Content-Type字段，如果不是image/jpeg，就把addImage的第二个格式参数改成对应值（比如PNG就写'PNG'、WebP就写'WEBP'）
  2. 把图片本地保存后用图片查看器打开，看文件属性里的真实格式，和代码里声明的格式保持一致
• 排查跨域污染问题：如果图片存储域名和当前页面域名不一致，且图片服务端没有配置跨域响应头，哪怕你提前预加载了图片，JS也无法读取到图片的真实二进制数据，拿到的是被浏览器污染的空数据，也会触发格式报错。这种场景需要给图片服务配置Access-Control-Allow-Origin跨域头，同时给Image对象添加crossOrigin="Anonymous"属性再加载。
• 排查加载时序问题：你虽然做了预加载，但如果执行PDF生成逻辑时图片还没触发onload完成加载，传给addImage的就是未完成加载的空Image对象，同样会报错。必须等图片加载完成后，再转成可用的图片数据传入。

可直接参考以下修正后的实现代码：

// 封装图片加载方法，加载完成后直接转成jsPDF可识别的dataURL
const loadImgToDataURL = (imgSrc) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 跨域场景下必须加下面这行配置
    img.crossOrigin = 'Anonymous';
    img.onload = () => {
      const tempCanvas = document.createElement('canvas');
      tempCanvas.width = img.naturalWidth;
      tempCanvas.height = img.naturalHeight;
      const ctx = tempCanvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      // 这里输出的mimeType要和图片真实格式一致
      resolve(tempCanvas.toDataURL('image/jpeg', 1.0));
    }
    img.onerror = reject;
    img.src = imgSrc;
  })
}

// 生成PDF前先等待所有图片加载转换完成
const [tickedJPEG, noTickJPEG] = await Promise.all([
  loadImgToDataURL("/images/pxPrescription/active_tick.jpg"),
  loadImgToDataURL("/images/pxPrescription/no_tick.jpg")
])

doc.setFont('helvetica');
doc.setFontSize(10);

const basestarty = 190;
const basestartx = 15;
const offsetextra = 6;
const extraadd = 0.5;
const extratextoffsetx = basestartx + 10;
const extratextoffsety = basestarty + 10.5;

doc.text(extratextoffsetx, extratextoffsety, "Distance");

if(jQuery('#extraDist').is(":checked")){
  doc.addImage(tickedJPEG, 'JPEG', basestartx, basestarty + offsetextra + extraadd, 5, 5);
}else{
  doc.addImage(noTickJPEG, 'JPEG', basestartx, basestarty + offsetextra + extraadd, 5, 5);
}

注意：如果toDataURL输出的字符串开头是data:image/png;base64,，说明原图实际为PNG格式，要么将原图重新导出为标准JPEG，要么将addImage的格式参数改为PNG，格式匹配后错误就会消失。

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