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 https://github.com/parallax/jsPDF/issues/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

[yuvraj1999pratyush]

Facing similar issue where i have report with multiples images from s3 but on download to pdf the images are not rendereing.

[AutismPatient]

Is there a solution to this problem recently, because it still exists

[AutismPatient]

最近这个问题有解决办法吗，因为还是存在

Current solutions:

• Request the image as XHR and convert it to DataURL

[Nisha1205092]

In my express app, I am unable to get the image rendered in my pdf. I'm not using html to generate the pdf. So far I've tried to use local image and base64 strings. The base64 string is correct as I can see it in the browser. I'm also using jpeg. But I cannot get any image to be displayed. Nothing is working.

My code snippet: pdf.addImage(imageData, "JPEG", 15, 40, 180, 180);

[AutismPatient]

In my express app, I am unable to get the image rendered in my pdf. I'm not using html to generate the pdf. So far I've tried to use local image and base64 strings. The base64 string is correct as I can see it in the browser. I'm also using jpeg. But I cannot get any image to be displayed. Nothing is working.

My code snippet: pdf.addImage(imageData, "JPEG", 15, 40, 180, 180);

From the official example

// Don't forget, that there are CORS-Restrictions. So if you want to run it without a Server in your Browser you need to transform the image to a dataURL
// Use http://dataurl.net/#dataurlmaker
var doc = new jsPDF();

doc.setFontSize(40);
doc.text("Octonyan loves jsPDF", 35, 25);
doc.addImage("examples/images/Octonyan.jpg", "JPEG", 15, 40, 180, 180);

[Nisha1205092]

In my express app, I am unable to get the image rendered in my pdf. I'm not using html to generate the pdf. So far I've tried to use local image and base64 strings. The base64 string is correct as I can see it in the browser. I'm also using jpeg. But I cannot get any image to be displayed. Nothing is working. My code snippet: pdf.addImage(imageData, "JPEG", 15, 40, 180, 180);

From the official example

// Don't forget, that there are CORS-Restrictions. So if you want to run it without a Server in your Browser you need to transform the image to a dataURL
// Use http://dataurl.net/#dataurlmaker
var doc = new jsPDF();

doc.setFontSize(40);
doc.text("Octonyan loves jsPDF", 35, 25);
doc.addImage("examples/images/Octonyan.jpg", "JPEG", 15, 40, 180, 180);

Thank you for your response. This solved my issue. I am using jsPDF and jsPDF autotable in my Express js app, where I am not using any html to generate my pdf from my mongo documents.

https://stackoverflow.com/a/48631694/3164371

[Narenkumar1234]

Hey Guys if you use html2canvas to capture the image and then add it to jsPDF using .addImage function the issue is not with jsPDF the issue is with html2canvas while capturing an image

print the canvas generated by html2canvas copy and paste in new tab you can find whether it captured as you expected or not

Hope this helps!