«Неполный или поврежденный файл PNG» при добавлении изображения в PDF

Question

У меня есть изображение 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);

Answer 1

Я никогда не использовал эту библиотеку, но в соответствии с документацией , вы должны фактически передать данные изображения в 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);
  });