PDF.js 插入图像

Posted 2023-02-24

【中文标题】PDF.js 插入图像

【英文标题】：PDF.js Inserting Images

【发布时间】：2012-07-29 20:26:35

【问题描述】：

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

【问题讨论】：

最常见的用例是通过自定义外观流插入图像作为标记注释，这样您就不需要编辑实际的 pdf 页面内容。更多信息：pspdfkit.com/blog/2018/what-are-appearance-streams

【参考方案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();

我希望这会有所帮助。

【参考方案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 上的示例。

【讨论】：

你好@Eugene 我们可以添加带有图像的html（或div）来生成pdf吗？我可以分享一些代码示例。提前致谢。

@PlanetHackers in bytescout 简单的 html 格式支持文本和链接，但不支持图像，不幸的是。可以使用 .imagePlace() 方法放置图像