PDF.js 插入图像

Question

顺便说一句，我已经开始使用PDF.js了，非常棒的作品。

但现在我想在 pdf 页面上插入一个图像（来自一个画布元素）。这是我的代码：

var image = myCanvas.getContext('2d').getImageData(0,0,400,300),
doc = new pdf();
doc.setProperties({
    title: fileName,
    author: 'VirtuaLab®',
    creator: 'pdf.js'
});
doc.addPage();
data = doc.output();

但我还没有找到任何关于在 PDF.js 页面上插入图像的信息。

可能是doc.image() 或doc.addImage？

Answer 1

如果我正确理解您的问题，您想在 pdf.js 中使用 <img> 而不是 <canvas>。

所以这是我对这个问题的解决方法，将返回的图像插入到画布中，给画布一个display: none;。

然后使用canvas元素的.toDataURL()方法为你的img获取src。

var canvas = document.getElementById("myCanves");
var img = document.getElementById("myImg");
img.src = canvas.toDataURL();

我希望这会有所帮助。

Answer 2

免责声明：我为Bytescout工作

很遗憾，PDF.js 不能处理图像，这就是我们开发 PDF Generator SDK for Javascript（非商业用途免费）的原因，您可以在其中添加图像（来自 url 或画布），如下所示：

// load image from local file
pdf.imageLoadFromUrl('image1.jpg');
// place this mage at given X, Y coordinates on the page
pdf.imagePlace(20, 40);

重要的是，您可能会面临图像大小的限制，因为 BytescoutPDF.js 可能会消耗内存来处理大图像（此问题是由 javascript 的内存限制引起的）。

但是，如果您只需要在生成的 pdf 中插入徽标图像或小图片，脚本应该可以正常工作。

更新：最新版本的jsPDF（不要与PDF.js 混淆）似乎可以处理图像，请参阅examples page 上的示例。