Insert firestore uploaded image in jsPDF

Question

I have an uploaded image in Firestore and I am able to get download URL in my Angular application.

Download URL is like:

https://firebasestorage.googleapis.com/v0/b/appname.appspot.com/o/clinica%2Flogo?alt=media&token=123456789-2bf7-4711-ba17-d12345678

When I click on it web browser shows the image, but how could I include it in jsPDF document? I tried to do:

const doc = new jsPDF('portrait', 'mm', 'a4');
doc.addImage(this.downloadURL, 'JPEG', 30, 20);

But I get this error:

ERROR Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData 
at Object.x.convertStringToImageData (jspdf.min.js:50)
at Object.x.addImage

Thanks!

Answer 1

According to the jsPDF documentation the addImage method accepts its imageData in these formats:

imageData: string | HTMLImageElement | HTMLCanvasElement | Uint8Array

imageData as base64 encoded DataUrl or Image-HTMLElement or Canvas-HTMLElement

So you can't simply pass in a URL that points to an image.

A simple way to get the image into a support format is by creating a img element in code:

var img = document.createElement('img');
img.src = this.downloadURL;
doc.addImage(img, 'JPEG', 30, 20);