使用PDFLib的drawImage向PDF插入图片报PDFImage类型错误求助

问题原因 #

• 你传入generatePDF的pic参数是文件输入框的value值，仅为本地文件名的字符串，并非jpg图片的二进制数据
• 没有将jpg图片数据通过PDFLib提供的embedJpg方法转换成PDF文档可识别的PDFImage实例，直接传入drawImage方法就会触发类型报错
• drawImage方法的入参格式错误，第二个参数需要传入配置对象，而不是直接传递x、y坐标参数

修正代码 #

const generatePDF = async (name,picBuffer) => {
    const { PDFDocument, rgb} = PDFLib;
    const existingPdfBytes = await fetch("./cert.pdf").then((res) =>
      res.arrayBuffer()
    );
    const exfont = await fetch("./Sanchez-Regular.ttf").then(res =>{
      return res.arrayBuffer()
    })

    const pdfdoc = await PDFDocument.load(existingPdfBytes)
    pdfdoc.registerFontkit(fontkit);

    const myFont = await pdfdoc.embedFont(exfont);
    // 嵌入jpg图片得到PDFImage实例
    const embeddedImage = await pdfdoc.embedJpg(picBuffer);

    const pages = pdfdoc.getPages();
    const firstPg = pages[0]

    firstPg.drawText(name,{
      x:300,
      y:310,
      size:50,
      font: myFont,
      color: rgb(.2,0.84,0.67)
    })
    // 修正drawImage的入参格式
    firstPg.drawImage(embeddedImage,{
      x: 100,
      y: 100,
      // 可选：自定义宽高，不填会默认使用图片原始尺寸
      // width: 200,
      // height: 200
    });
  
  
    const uri = await pdfdoc.saveAsBase64({dataUri: true})
    saveAs(uri,"Certificate.pdf");
};

const submitbtn = document.getElementById("submit1")
const inputval = document.getElementById("fname")
const inputcal = document.getElementById("logo1") // 需确保该元素为type="file"的文件选择框

submitbtn.addEventListener("click", async () => {
  const val = inputval.value;
  // 读取选中的jpg文件为ArrayBuffer
  const selectedFile = inputcal.files[0];
  if (!selectedFile) return;
  const picBuffer = await selectedFile.arrayBuffer();
    
  generatePDF(val, picBuffer);
})

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