Javascript “；PNG文件不完整或损坏”；将图像添加到PDF时

我有一个PNG图像，我想在PDF中显示。但是，当我使用以下代码时，会出现以下错误：

core.js:1449错误：未捕获（承诺中）：错误：PNG文件不完整或损坏
错误：PNG文件不完整或损坏

这是我的代码：

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

---

我从未使用过这个库，但是，您必须实际将图像数据传递给

addImage

有几种方法可以解决这个问题。一种是将

图像

实例绘制到画布上，将画布位图数据编码为PNG，然后将PNG输出编码为base64。这就是文档所说的

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

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

---

我从未使用过这个库，但是，您必须实际将图像数据传递给

addImage

有几种方法可以解决这个问题。一种是将

图像

实例绘制到画布上，将画布位图数据编码为PNG，然后将PNG输出编码为base64。这就是文档所说的

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

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