3

顺便说一句，我已经开始使用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？

4

2 回答 2

6

免责声明：我为Bytescout工作

不幸的是，PDF.js 不能处理图像，这就是为什么我们为 Javascript 开发 PDF Generator SDK（非商业用途免费），您可以在其中添加图像（来自 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 混淆）似乎适用于图像，请参阅示例页面上的示例。

于 2012-08-10T11:36:03.263 回答
0

如果我正确理解了你的问题，你想用 pdf.js<img>代替 a 。<canvas>

所以这是我对这个问题的修复，像往常一样将返回的图像插入到画布中，给画布一个display: none;.

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

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

我希望这有帮助。

于 2017-05-18T18:31:38.337 回答