Image file is failing to render on PDF

[ganesh095]

Hey there!

When I export to PDF, the images are displayed as a black line / rectangle. I am facing this with few images and others are displaying fine. It is not related to CORS issue. Images were uploaded to https://imgbb.com/ and created sample code in jsfiddle.

Facing same issue with both .addImage() and .html() methods.
Using html - jsfiddle link
Using addImage - jsfiddle link

Is there any work around to fix this issue?

[HackbrettXXX]

Thanks for the bug report. A pull request for a fix would be welcome.

[JobSoltero]

Hi! Could you please reupload the photos?

[victoromc]

This problem also happens to me, there are photos that work and photos that don't.

[hardouinyann]

That is also something that happens to me :'(

[TiBeN]

Similar issue for me too, the image does not render correctly:

doc.addImage('/my-image.png', 'PNG', 20, 20, 50, 36);

JPG image doesn't display at all, PNG is totally corrupted. Tried every methods (dataURL, url string, Image object..).

Tried with v2.51 and v2.3.1, firefox 100 and chromium v101.0.4951.54. Same results.

[TiBeN]

It seems jsPDF.addImage() does not wait the image to be loaded completely. Waiting for "onload" in an Image object does work:

    const doc = new jsPDF();
    const img = new Image();
    img.src = 'http://localhost:8080/my-image.png';
    img.onload = () => {
        doc.text('content', 1, 1);
        doc.addImage({ imageData: img, x: 10, y: 20 });
        doc.save();
    };

Passing img directly or url does not. As to base64, i don't know...

EDIT My issue has been solved but it had nothing to do with image loading but how i output my doc as blob to workaround
#3391 . Sorry for the noise

[PororoChan]

same problem to me when after updating on existing pdf file using jsPDF and Codeigniter Ajax, resulting this, how i can get pass this issue?

[PororoChan]

I'm trying to make signature proccess and for the saving pdf after signature i use the jsPDF, i want to get the generated pdf file after signed, so there is not download proccess, what i need is to get the pdf data from generated jsPDF and attach it into server using Ajax Codeigniter, how can i get help, please:)

[lasmil]

@ganesh095 , I tried to replicate this issue locally and using the jsfiddle examples you provided (I had to change the image urls because they have expired). I was not able to replicate this. Everything worked for me. Can you please try to retest this?

[rajnishswift]

I'm also facing the same issue but it's working fine on Mac with Safari and not with chrome. Anybody's can help me?

[im-variable]

I'm trying to convert html element into pdf. Everything is working fine , but it doesn't render the aws image in pdf. Even though if i add a local path to the img src attribute then it render's that image in pdf.

  const invoiceSection = $("#customer_invoice_bill");

  let invoiceName = invoiceSection.data("invoiceName");

  $("#btnDownloadInvoice").on("click", function () {
      var pdfConf = {
        pagesplit: true,
        background: "#fff",
        image: { type: "webp", quality: 0.98 }, // as per req
        html2canvas: { dpi: 300, letterRendering: true, useCORS: true },
      };
      var pdf = new jsPDF("p", "pt", [
        invoiceSection.height() + 100,
        invoiceSection.width(),
      ]);
      pdf.addHTML(invoiceSection, pdfConf, function () {
        pdf.save(`${invoiceName}.pdf`);
      });
  });

this is the actual image

this is how pdf is rendered without image. but it rendered the last image which is below(signature) as i have assign a local path to the src=""

I have also raised this issue in stackoverflow as well
https://stackoverflow.com/questions/74807762/jspdf-jspdf-not-rendering-aws-image-into-pdf

[PROxZIMA]

If you are using doc.html(...) then a temporary fix is to use <img src="..."> instead of background-image. You must apply width: 100%; height: 100%; object-fit: cover CSS property to the img to make it work properly.

[lylest]

Facing the same issue on node.js i tried to convert image to base64