Jspdf: addImage Error using URL

[magicalbrad]

Are you using the latest version of jsPDF?
Yes, the problem occurs in 1.5.3. The same code works in 1.4.1

Have you tried using jspdf.debug.js?
Yes

Steps to reproduce

var doc = new jsPDF();
doc.addImage("https://promo.bradbrownmagic.com/pdf-flyer/flyers/poster-dark-cmyk.jpg","JPEG",0,0);
doc.save();

Here's a fiddle with the minimal example.

https://jsfiddle.net/magicalbrad/sg4ba31x/

What I saw
Using 1.4.1, the code works.
Using 1.5.3, addImage fails and execution stops. I get a console error:

Uncaught Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData
at Object.jsPDFAPI.convertStringToImageData (jspdf.debug.js:7627)
at Object.jsPDFAPI.addImage (jspdf.debug.js:7567)
at window.onload ((index):35)

What I expected
I expected it to work under the new version as it did previously.

I worked around this by updating my site's live code to pass a base64 encoded string instead of a URL, so I'm OK. But, I thought it would be worth mentioning that this functionality is broken. (Unless it is no longer supported, but it looks like it wasn't intentionally removed.)

BTW: Thanks for all your work on this awesome project!

[Uzlopak]

Hi,

I see.

[Uzlopak]

possible fix in #2202

[Uzlopak]

fix tested locally and it works as expected.

[adong]

@arasabbasi Can you make a new release with this patch? Thank you

[solognt]

I have a similar issue with svg elements in html. So a document with like <div><svg><rect>...</svg></div>

Fiddle with the problem:
http://jsfiddle.net/09r7t1hq/4/

It gives this error in console:

Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData 
    at Object.x.convertStringToImageData (jspdf.min.js:formatted:1)
    at Object.x.getImageProperties (jspdf.min.js:formatted:1)
    at n.drawImage (jspdf.min.js:formatted:1)
    at CanvasRenderer.drawImage (jspdf.min.js:formatted:1)
    at jspdf.min.js:formatted:1
    at CanvasRenderer.clip (jspdf.min.js:formatted:1)
    at callback (jspdf.min.js:formatted:1)
    at CanvasRenderer.clip (jspdf.min.js:formatted:1)
    at Renderer.renderNodeContent (jspdf.min.js:formatted:1)
    at Renderer.renderNode (jspdf.min.js:formatted:1)

Is this the same issue? I did try the master and problem still occurs.

[jeffjenk]

Hi @arasabbasi I was wondering if this fix made it into the NodeJS version of the jsPDF script as I am getting the same error using it in NodeJS (jspdf version 1.5.3).

[jmasonlee]

I don't think it did... it looks like the fix was committed right after jsPDF 1.5.3 was tagged :-(

[jeffjenk]

@jmasonlee thanks for pointing that out.

I have found a workaround in the meantime, I am using Jimp to convert images to jpeg before adding them to the PDF.

I will keep an eye out for the next release jsPDF.

[es11400]

Hi @arasabbasi, thanks.

I have the same problem, on 1.5.3 version don't aggregate images with url

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

doc.addImage('https://images.unsplash.com/photo-1554620121-59e7f3f6e3a4', 'JPEG', 1, 1, 2.5, 2.5)

The same code works in 1.4.1

¿I need convert images jpg to base64?

[gaetanmallet]

i still have same issue after pull the commit of the fix

[Unicity-Pimentel]

Any workaround on this one?

[arvenaguinaldo]

any fix?

[cgowez]

I found a workaround, http://raw.githack.com/MrRio/jsPDF/master/
Choose example "Auto print"

// You'll need to make your image into a Data URL
// Use http://dataurl.net/#dataurlmaker
var imgData = 'data:image/jpeg;base64,/ ....

So, go to http://dataurl.net/#dataurlmaker, upload your image and use the Data URL string
It worked for me.

[magicalbrad]

Since this is still an issue, I thought I'd post an example of how I worked around the issue. It includes code to convert an image URL to Base64. If I remember correctly, I used the old "URL to Base64" code from jsPDF as a starting point for my code.

This solution works well for a single image. If you need several, it would quickly get cumbersome without considerable refactoring to avoid callback hell.

FWIW, here's a fairly minimal fiddle. https://jsfiddle.net/magicalbrad/pg5dejn6/

[rob101]

This is still an issue as although dist is on 2.1.1, the last release is 1.5.3 and the fix above wasn't applied in that release.

To fix it, simply load your image first;

    var img = new Image();
    img.src = '/path/to/image.png';
    doc.addImage(img, "PNG", 1, 1);

[geoidesic]

Can we get a new release please? It's only been like 2 years! :)

[HackbrettXXX]

See my comment in #2704.

[Abuabdelah]

thank you @rob101
var img = new Image();
img.src = 'https://XXX/logo.png';
doc.addImage(img, "PNG", 345, 117, 32, 32)

[ShirazWorld]

In the 1.5.3 version this has been fixed and it works for me i have used CDN https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js
function () {
`let img = new Image();
img.src = 'https://www.whateverimageurl.png';

// PDF IMAGE
doc.addImage(img, 'PNG', 15, 40, 180, 180);`
}