![](/img/trans.png)
[英]how to upload image Url Uploaded to Fire Storage and Save it in fireStore at the Same time Using Java
[英]Insert firestore uploaded image in jsPDF
我在 Firestore 中上传了一张图片,我可以在我的 Angular 应用程序中获取下载 URL。
下载网址是这样的:
当我点击它时,网络浏览器会显示图像,但我如何将它包含在 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
谢谢!
根据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);
我通过执行以下步骤来完成这项工作:
首先,按照此解决方案在您的 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;
})
}
希望这对你有帮助,我一直在寻找这个解决方案,所以尽可能多地分享。
问候。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.