在 jsPDF 中插入 firestore 上傳的圖片

Question

我在 Firestore 中上傳了一張圖片，我可以在我的 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 作為 base64 編碼的 DataUrl 或 Image-HTMLElement 或 Canvas-HTMLElement

所以你不能簡單地傳入一個指向圖像的 URL。

將圖像轉換為支持格式的一種簡單方法是在代碼中創建一個img元素：

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

Answer 2

我通過執行以下步驟來完成這項工作：

首先，按照此解決方案在您的 firebase 存儲中設置 CORS

我使用了以下 cors.json

[
 {
   "origin": [
       "*"
   ],
   "method": [
       "GET"
   ],
   "maxAgeSeconds": 3600
 }
]

然后只需使用以下代碼讀取您的 url 並將其添加到您的 pdf 中：

async generatePDF(your_image_url: string) {
  let imageLoaded: HTMLImageElement = await this.getDataUri(your_image_url);
  let pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addImage(imageLoaded, 0, 0, 250, 250);
  pdf.save('test.pdf');
}



async getDataUri(url): Promise<HTMLImageElement> {
    return new Promise(resolve => {
      var image = new Image();

      image.onload = () => {
        resolve(image);
      };

      image.src = url;
    })
 }

希望這對你有幫助，我一直在尋找這個解決方案，所以盡可能多地分享。

問候。