1

For a project I'm working on I need to generate a pdf with the logo of the company. For this, I'm using the jspdf library in Angular 2.

The addImage() requires a base64 string. I'm not quite sure if this is the way to go, but this is my code:

let imageURL = 'data:image/png;base64,' + btoa('../../public/img/logo2.png');

this.pdf.addImage(imageURL, 'PNG', 50, 50, 50, 50);

This would give the following error:

Incomplete or corrupt PNG file

When I add console.log(imageURL) and I copy the result to the adres bar, instead of the image I'm trying to open a transparant image, like this example.

If I drag the image into this site and convert the image to a base64 string there, it does give me a working dataUrl.

So my essential question is, how can I convert a image to a base64 string, preferably without having to install a library.

FlorisdG
  • 754
  • 5
  • 11
  • 31
  • 3
    you are base-64 encoding an url, not the image, you need to load it first. – n00dl3 Apr 21 '17 at 07:40
  • Like I said, I prefer not having to install a library for this since I'd only need 1 function from the library. If I absolutely have to, I will do so, but if there is a alternative option I'd love to know – FlorisdG Apr 21 '17 at 07:55
  • What are you talking about ? I am not talking about a library... Read the answers of the duplicate ! – n00dl3 Apr 21 '17 at 07:57
  • 2
    the second one (with 413 up) explains very well how to achieve that, and there is no library required... – n00dl3 Apr 21 '17 at 08:03
  • Sorry, read the answer in the question wrong. I thought he was talking about `html2canvas` instead of html5's `canvas` – FlorisdG Apr 21 '17 at 08:05
  • It worked for me, tx @n00dl3 – FlorisdG Apr 21 '17 at 08:23

0 Answers0