jsPDF: addImage Error using URL

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!

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 20

Most upvoted comments

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);

+10

rob101 on Apr 27, 2020

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

wpplumber on Jun 2, 2020

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).

jeffjenk on Mar 11, 2019

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.

solognt on Jan 15, 2019

possible fix in #2202

Uzlopak on Dec 27, 2018

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);` }

ShirazWorld on Jun 5, 2020

Can we get a new release please? It’s only been like 2 years! 😃

geoidesic on May 21, 2020