将firestore上传的图片插入jsPDF [英] Insert firestore uploaded image in jsPDF

问题描述

我在Firestore中有一个上载的图像，并且能够在Angular应用程序中获得下载URL.

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

下载网址如下:

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

当我单击它时，Web浏览器将显示图像，但是如何将其包含在jsPDF文档中?我尝试这样做:

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);

但是我得到这个错误:

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

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

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

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

使图像成为支持格式的一种简单方法是通过在代码中创建一个 img 元素:

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

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

这篇关于将firestore上传的图片插入jsPDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！