插入jpg图像并使用jsPDF创建pdf

Question

我想使用 jsPDF 库在创建 pdf 文档时插入 jpg 图像。我尝试使用此代码：

var doc = new jsPDF();

var niceimage = new Image();

niceimage.src = '/resources/images/myimage.jpg';

doc.text(10, 10, 'Hello world!');

doc.addImage(niceimage, 'JPEG', 10, 10, 150, 76);

doc.save('a4.pdf');

我收到消息说它不是 jpg 图片。有什么想法吗？

Answer 1

根据我的研究，似乎文件 myimage.jpg 不能直接在 jsPDF 中使用。图像应该被转换为 base64 文件，并在 jsPDF 中以这种方式使用。我找到了一个很棒的工具，可以将 jpg 和 png 文件在这里 https://www.base64-image.de/ 转换为 base64。

由于这些文件非常庞大，它们会增加您的 javascript 文件的大小。我找到了一个解决方案，将 myimage.jpg 文件的内容（base64）放入 myimage.js:

var myImage = 'data:image/jpeg;base64,/9j/4QAYR..very..very....long...string...'

将该文件包含在您的 html 文件中：

<script type="text/javascript" src="/js/myimage.js"></script>

在你的主 javascript 文件中你可以写：

var doc = new jsPDF();

doc.text(10, 10, 'Hello world!');

doc.addImage(myImage, 'JPEG', 10, 30, 150, 76);

doc.save('a4.pdf');

您将以 Hello world 结束！和下面的图片。

如果您是 jsPDF 的新手，可以在 https://parall.ax/products/jspdf

了解更多信息

希望能有所帮助 ;)

插入jpg图像并使用jsPDF创建pdf

Insert jpg image and create pdf using jsPDF

javascript

jspdf