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（免费用于非商业用途），你可以在这里添加图片（来自网址或画布），如下所示：

// 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

如果我正确理解了您的问题，您希望使用<img>代替<canvas>和pdf.js。

所以这是我对此问题的修复，将正常情况下返回的图像插入画布，给画布display: none;。

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

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

我希望这会有所帮助。

PDF.js插入图像

2 个答案: