Supplied Data is not a valid base64-String jsPDF.convertStringToImageData

[Coder806]

var doc = new jsPDF();
var header = 'data:image/jpeg;base64,/9j/...';
doc.addImage(header, 'JPEG', 132, 15, 60, 20);

I can't get the image to display. I only get the error message provided in the title. I'm encountering this problem in IE 11. Chrome, Edge, and Firefox work fine. Is there a workaround for this?

[jagadeesh01]

@Coder806 did u solved this issue ???

[Clipperer]

@Coder806 did u solved this issue ???

+1

[LadyJesk]

@Coder806 Did you solve this issue? We see that you closed it out on May 28th but you didn't share what resolved the issue. It would be helpful to others who come across this thread if you shared that information.

[mmghv]

For anyone who's having this error (Supplied Data is not a valid base64-String jsPDF.convertStringToImageData) in firefox when trying to encode an image using FileReader :

I was having this error only in firefox when using FileReader to encode the image to base64 (not for all images though).
I spent some time debugging and found out the problem was that for some images (on firefox) the FileReader was adding additional charset info to the string which caused the problem:

data:image/png; charset=utf-8;base64,iVBOR...

So I used an alternative approach to load the image and it worked great :

function loadImage(url) {
  return new Promise((resolve) => {
    let img = new Image();
    img.onload = () => resolve(img);
    img.src = url;
  })
}


loadImage('images/logo.png').then((logo) => {
  const doc = new jsPDF('p', 'mm', 'a4');
  doc.addImage(logo, 'PNG', 10, 10);
  doc.save('report.pdf');
});

[lucabertolasi]

I was having this error (Supplied Data is not a valid base64-String jsPDF.convertStringToImageData) because I was trying to convert empty wrapper div elements, that are elements having childElementCount equal to 0.
I now check against it before starting the conversion, discarding those elements.

[bettysteger]

got this error on the Live Demo: http://raw.githack.com/MrRio/jsPDF/master/

[lucabertolasi]

got this error on the Live Demo: http://raw.githack.com/MrRio/jsPDF/master/

Proposed this little change change to fix it.

In the meantime you can manually see it working via these steps:

• open the dev tools
• inspect the dropdown
• change the first option value's to "images_png.js"
• click on the dropdown and select another option, like "circle"
• see the circle scrip load
• click again on the dropdown, this time on "image"
• see the new scrip load and the tiger appearing
• download the pdf

[isaacjamesdev]

For anyone who's having this error (Supplied Data is not a valid base64-String jsPDF.convertStringToImageData) in firefox when trying to encode an image using FileReader :

I was having this error only in firefox when using FileReader to encode the image to base64 (not for all images though).
I spent some time debugging and found out the problem was that for some images (on firefox) the FileReader was adding additional charset info to the string which caused the problem:

data:image/png; charset=utf-8;base64,iVBOR...

So I used an alternative approach to load the image and it worked great :

function loadImage(url) {
  return new Promise((resolve) => {
    let img = new Image();
    img.onload = () => resolve(img);
    img.src = url;
  })
}


loadImage('images/logo.png').then((logo) => {
  const doc = new jsPDF('p', 'mm', 'a4');
  doc.addImage(logo, 'PNG', 10, 10);
  doc.save('report.pdf');
});

Work great to me.
thanks

[JLopeDeB]

Hi, has anyone managed to use the Promise approach, with more than 1 page? If I add more pages, the logo always end up in the last page, even after making the 'loadImage' function use async / await. Thanks for your help.

[afridi315]

Make sure that the content you are passing is not empty.