gpt4 book ai didi

javascript - 如何将图像数据 uri 从 javascript 传递到 php

转载 作者:行者123 更新时间:2023-12-03 09:22:35 24 4
gpt4 key购买 nike

我有一个显示图表的网页。我必须生成该图表的 pdf 文件。所以我编写了这段代码来将图表捕获为图像并放入 pdf 中。我使用 html2canvas 来生成图像的数据 uri。现在我在 javascript 中被这个 uri 困住了。 pdf代码是一个需要这个uri的php脚本。我该怎么做呢 ?Chart.php 生成图表并使用 html2canvas 将图像 datatauri 存储到本地存储中。

CHART.PHP
<script>
//<![CDATA[
(function() {
window.onload = function(){
html2canvas(document.getElementById('chart'), {
"onrendered": function(canvas) {
var img = new Image();
img.onload = function() {
img.onload = null;
console.log(canvas.toDataURL("image/png"));
window.localStorage.setItem("imgURL", canvas.toDataURL("image/png"));
};
img.onerror = function() {
img.onerror = null;
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
//alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
};
})();
//]]>
</script>
<body>
<a href="pdfGen.php" id="download" >Report</a>
</body>

这是使用 fpdf 库生成 pdf 的 php 脚本

pdfGen.php
<?php
/*$pdf = new FPDF();
$pdf->AddPage();

//over here I want to add the image from the chart.php page whose data url is now in the localstorage.
..more code to generate report
$pdf->output();*/
?>

我如何将这么大的 uri 发送到这个 php 脚本?尝试 ajax 不起作用,因为我需要重定向到这个 php 页面。另外,在 url 中发送 uri 也不起作用,因为 url 变得太大并超出了其容量。

最佳答案

在您的脚本中:

<script>
document.getElementById('imageURL').value=canvas.toDataURL("image/png");
</script>

在您的正文中创建一个带有报告按钮和 URL 隐藏字段的表单:

<body>
<form action="pdfGen.php" id="download" method="post">
<iput type="hidden" id="imageURL" name="imageURL"/>
<input type="submit" value="Report" name="submit"/>
</form>
</body>

在您的php页面中 - pdfGen.php

<?php
$imageURL = $_REQUEST['imageURL'];
?>

希望有帮助。

编辑

<script>
//<![CDATA[
(function() {
window.onload = function(){
html2canvas(document.getElementById('chart'), {
"onrendered": function(canvas) {
var img = new Image();
img.onload = function() {
img.onload = null;
console.log(canvas.toDataURL("image/png"));
document.getElementById('imageURL').value=this.src;
};
img.onerror = function() {
img.onerror = null;
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
//alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
};
})();
//]]>
</script>

关于javascript - 如何将图像数据 uri 从 javascript 传递到 php,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31801548/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com