JsPDF: Error (Incomplete or corrupt png file)-CodePudding

I am trying to add a logo and I tried adding a picture but printing it will show this error:

Incomplete or corrupt PNG file

How do I solve this?

I recreated the problem here: https://codesandbox.io/s/js-pdf-with-data-printable-from-displayed-data-lup6ir?file=/src/App.js

  const handlePrint = () => {
    console.log("clicked");
    const doc = new jsPDF();

    var img = new Image();
    img.src = "assets/logo-social.png";
    doc.addImage(img, "png", 10, 78, 12, 15);

    doc.text("Title here", 20, 10);
    doc.text("Sample", 20, 15);

    const columns = ["Data"];
    const rows = [];
    data.map((item) =>
      rows.push([
        item.cartItems.map(
          (item) => `${item.name}: ${item.color} = ${item.quantity}`
        )
      ])
    );
    doc.autoTable(columns, rows);
    doc.save("order.pdf");
  };

CodePudding user response：

The image is not fully loaded at the moment of its usage in doc.addImage. Wait for the image to be fully loaded and call addImage then.

const img = new Image();
img.src = 'image-url';
img.onload = () => {
  // await for the image to be fully loaded
  doc.addImage(img,'png',...);
  doc.text("Sample", 20, 15);
  //...
  doc.save('order.pdf');
};