[英]jsPDF & html2canvas not writing image to pdf
使用jspdf和html2canvas對用戶在表配置器上選擇的配置進行快照(選擇頂部/側面/層壓顏色)。 通過使用透明png更改每個圖像的來源來實現。
我在將圖像插入pdf時遇到問題。 我可以毫無問題地將其附加到文檔中,並且可以將文本和其他圖像無問題地寫入pdf。 我擔心我的形象太大了。 生成的base64輸出是巨大的。
我將其寫入控制台:
var doc = new jsPDF('p', 'pt','a4',true);
doc.setFontSize(16);
doc.setTextColor(80, 77, 78);
doc.text(15, 2, 'should be an image under here');
html2canvas($("#prod"), {
useCORS : true,
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/jpeg');
doc.addImage(imgData, 'JPEG', 15, 0, 34, 37);
console.log(imgData);
$('#prod').append(canvas);
}
});
doc.save('Spec_Sheet.pdf');
https://jsfiddle.net/x3x0e6ws/51/
所有圖像均來自本地服務器。 我在每個元素上都設置了最小高度,甚至嘗試在div中添加文本以強制設置高度。
我該如何補救?
謝謝,
首先,非常感謝jsfiddle。 其次,您非常接近...只需將doc.save移動到html2canvas回調中即可。
解釋原因:
當您調用html2canvas時,這是一個“異步”調用。 這就是為什么函數的第二個參數是“回調”的原因。 代碼在實際完成渲染或添加canvas
元素之前繼續下一行(在您的情況下為doc.save
)! 稍后,當畫布渲染完成時,代碼html2canvas
代碼返回到回調,並將圖像添加到您的(已保存)pdf中!
var doc = new jsPDF('p', 'pt','a4',true);
doc.setFontSize(16);
doc.setTextColor(80, 77, 78);
doc.text(15, 2, 'should be an image under here');
html2canvas($("#prod"), {
useCORS : true,
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/jpeg');
doc.addImage(imgData, 'JPEG', 15, 0, 34, 37);
console.log(imgData);
$('#prod').append(canvas);
doc.save('Spec_Sheet.pdf');
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.