将图像从 Firebase 存储插入 pdfmake答案

【问题标题】：Inserting images into pdfmake from Firebase storage将图像从 Firebase 存储插入 pdfmake
【发布时间】：2018-08-09 15:07:46
【问题描述】：

我目前在 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 格式。任何建议将不胜感激。

【问题讨论】：

请编辑问题以显示您正在使用的代码不能按您预期的方式工作。没有它，就不可能看到你可能做错了什么。

标签： angular firebase firebase-storage pdfmake

【解决方案1】：

您需要使用 Image Tag 显示图像

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

【讨论】：

这不适用于我的情况，因为我不是在 html 中显示图像，而是在后台生成 pdf。