插入jpg圖像並使用jsPDF創建pdf

Question

我想在創建pdf文檔時使用jsPDF庫插入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'); 

你會最終與你好世界！和下面的圖像。

如果一個新jsPDF你可以學到更多的https://parall.ax/products/jspdf

希望有點幫助;）