我正在尝试加载动态生成的多个图像。我想将这些图像转换为 PDF 格式。
HTML 代码如下：
<html>
<body>
<input type='submit' id='test' style='align:center' value='Generate'>
</body>
</html>
使用jspdf生成pdf的脚本是：
<script>
window.onload = function(){
var t = document.getElementById("test");
t.addEventListener("click", sayHi, false);
function sayHi(){
var getImageFromUrl = function(url, callback) {
var img = new Image();
img.onError = function() {
alert('Cannot load image: "'+url+'"');
};
img.onload = function() {
callback(img);
};
img.src = url;
}
var doc = new jsPDF();
var length = <?php echo count($items); ?>; /* $items id from php which is an array of items */
var cnt=0; /* using this variable to get the end of the loop */
<?php
foreach($items as $item)
{?>
cnt++;
getImageFromUrl('http://localhost:800/prod/chart.php?period=<?php echo $timeperiod; ?>&stime=<?php echo $startingtime; ?>&itemids=<?php echo $item->itemid; ?>&type=0&updateProfile=1&profileIdx=web.item.graph&width=1222&screenid=&curtime=1442486527893', function(imgData) {
doc.addImage(imgData, 'JPEG', 10, 10, 150, 75);
/* Initiall tried here to save pdf file and as a result n number of pdf's are downloading with same image */
/* doc.save('out.pdf'); */
}
);
<?php
}
?>
if(cnt==length)
{
/* after trying in for loop i tried here as a result i got only one pdf but with out images */
doc.save('out.pdf');
}
}
}
</script>
以下是我尝试过的方法：
- 尝试生成将所有图像保留在 div 标签中并使用该 div 标签生成 PDF。
- 以为图像是同步加载的，决定等到图像创建完成后生成PDF。这次我只收到一个 PDF，但没有图像。
- 尝试将图像转换为 Base 64 并显示它，但没有成功
在此先感谢您的帮助。
请参考此示例获取一张图像，并以相同的方式处理多张图像：
var img = new Image();
img.onload = function () {
var dataURI = getBase64Image(img);
return dataURI;
}
img.src = "../Images/UW_DriveLogo.jpg";
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/jpeg");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
然后你可以简单地调用 load 方法：
doc.addImage(img.onload(), 'PNG', doc.internal.pageSize.width - 75, 0, 75, 75);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
