Вставьте загруженное изображение из магазина в jsPDF

Question

У меня есть загруженное изображение в Firestore, и я могу получить URL для загрузки в своем приложении Angular.

URL-адрес загрузки выглядит следующим образом:

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

Когда я нажимаю на него, веб-браузер показывает изображение, но как я могу включить его в документ jsPDF? Я пытался сделать:

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

Но я получаю эту ошибку:

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

Спасибо!

Answer 1

Согласно документации jsPDF метод addImage принимает imageData в следующих форматах:

imageData: string|HTMLImageElement |HTMLCanvasElement |Uint8Array

imageData как DataUrl в кодировке base64 или Image-HTMLElement или Canvas-HTMLElement

Таким образом, вы не можете просто передать URL-адрес, указывающий на изображение.

Простой способ получить изображение в формате поддержки - создать элемент img в коде:

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