Javascript 在jsPDF中插入firestore上载的图像

我在Firestore中有一个上传的图像，我可以在我的Angular应用程序中获得下载URL

下载URL如下所示：

当我点击它时，web浏览器会显示图像，但我如何将其包含在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

谢谢

根据以下格式接受其

imageData

：

imageData

：

string

|

HTMLImageElement

|

htmlcanvaseelement

|

imageData作为base64编码的DataUrl或Image HtmleElement或Canvas HtmleElement

因此，您不能简单地传入指向图像的URL

将图像转换为支持格式的简单方法是在代码中创建

img

元素：

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

---

我通过以下步骤使其工作：

首先，遵循这个解决方案

我使用了以下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;
    })
 }

async generatePDF（您的_image_url:string）{
让imageLoaded:HTMLImageElement=等待这个.getDataUri（您的\u图像\u url）；
设pdf=新的jsPDF（'p'，'pt'，'a4'）；
pdf.addImage（imageLoaded，0,0,250,250）；
保存（'test.pdf'）；
}
异步getDataUri（url）：承诺{
返回新承诺（解决=>{
var image=新图像（）；
image.onload=（）=>{
解析（图像）；
};
image.src=url；
})
}

希望这对你有帮助，我一直在寻找这个解决方案，尽可能多地与你分享

---

问候。

非常感谢您的回答。现在，我收到以下错误：CORS策略已阻止对“”处XMLHttpRequest的访问：请求的资源上不存在“Access Control Allow Origin”标头。您是否已结合Firestore存储标记搜索该错误消息。是的，我可以允许下载图片后做。现在我可以生成带有Firebase图像的pdf文件。非常感谢。