将图像添加到 PDF 时出现“不完整或损坏的 PNG 文件”

【问题标题】：“Incomplete or corrupt PNG file” when adding image to a PDF将图像添加到 PDF 时出现“不完整或损坏的 PNG 文件”
【发布时间】：2019-03-20 13:29:29
【问题描述】：

我有一张 PNG 图像，我想在 PDF 中显示。但是当我使用以下代码时，我得到了这个错误：

core.js:1449 ERROR Error: Uncaught (in promise): Error: Incomplete or corrupt PNG file
Error: Incomplete or corrupt PNG file

这是我的代码：

let image = "assets/img/bgconfidential.png";
let img = new Image();
img.style.opacity = '0.2';
img.style.filter  = 'alpha(opacity=20)';
img.src = image;
console.log(img);
doc.addImage(img, 'png', internalPageWidth - 140 , 100, 20, 20);

【问题讨论】：

标签： javascript jspdf

【解决方案1】：

我从来没有使用过这个库，但是according to the documentation，你必须将图像数据实际传递给addImage。

有几种方法可以处理这个问题。一种是取Image 实例，将其绘制到画布上，将画布位图数据编码为PNG，然后将PNG 输出编码为base64。这就是文档所说的。

还有另一种方法。您可以使用 Fetch API。未经测试，但类似：

fetch('/assets/img/bgconfidential.png')
  .then(res => res.blob())
  .then((blob) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      doc.addImage(reader.result, 'png', ...);
    });
    reader.readAsDataURL(blob);
  });

【讨论】：