PDF.js插入图像

Question

顺便说一句，我已经开始使用PDF.js了，这是一项出色的工作。

但现在我想在pdf页面上插入一个图像(来自canvas元素)。下面是我的代码：

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

免责声明:我为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上的示例。

Answer 2

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

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

然后使用画布元素的.toDataURL()方法获取img的src。

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

我希望这能帮到你。