Question

我目前在Firebase的Angular应用程序中使用pdfmake。我正在尝试将图像插入正在创建的pdf文档中（使用表格，并且该图像在pdfmake中显示为一行）。

private afStorage: AngularFireStorage;

...

{image: this.afStorage.ref("/image.jpg").getDownloadURL(), colSpan: 2, alignment: 'center'}

我正在从Firebase存储中获取图像的下载URL，但是pdfmake出现以下错误：

”无效图片，图片字典应包含dataURL条目（或 node.js中的本地文件路径）”

我不知道如何将这些图像放入pdf文档或将它们从Firebase存储转换为dataURL格式。任何建议将不胜感激。

Answer 1

您需要使用图像标签显示图像

<img id="imageid" src="downloadURL">

然后您可以获得base64内容。

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var base64 = getBase64Image(document.getElementById("imageid"));

从Firebase存储中将图像插入pdfmake

1 个答案: