CODEWITHSUNDEEP
angularfirebasefirebase-storagepdfmake
Quins
Quins

Reputation: 813

Inserting images into pdfmake from Firebase storage

I'm currently using pdfmake in an Angular application on firebase. I'm trying to insert images into a pdf document I'm creating (a table is used and the image is displayed in a row in pdfmake).

private afStorage: AngularFireStorage;

...

{image: this.afStorage.ref("/image.jpg").getDownloadURL(), colSpan: 2, alignment: 'center'}

I'm getting the download url of the image from firebase storage but pdfmake gives the following error:

"invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)"

I have no idea how I can place these images into my pdf document or convert them to dataURL format from firebase storage. Any advice will be appreciated.

Upvotes: 1

Views: 2575

Answers (1)

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

You need to display image using Image Tag

<img id="imageid" src="downloadURL">

Then you can get the base64 content.

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var base64 = getBase64Image(document.getElementById("imageid"));

Upvotes: 0

Related Questions