如何通过图像数据的URI从JavaScript到PHP [英] how to pass Image data uri from javascript to php
问题描述
我有一个网页，其中显示一个图表。我不得不产生这种图表的PDF格式。所以我写了这个code捕捉图表作为图像，并把PDF中。我用html2canvas这其中产生的数据的URI图像。现在，我坚持这个URI中的JavaScript。 PDF格式code是它需要这个URI的PHP脚本。我该怎么做呢？ 该chart.php生成图表，并使用html2canvas存储图像datatauri到localStorage的。
I have a webpage which displays a chart. I had to generate a pdf of this chart. So I wrote this code to capture the chart as an image and put inside the pdf. I used html2canvas for this which generated a data uri for the image. Now I am stuck with this uri in javascript. The pdf code is a php script which needs this uri. How do I do this ? The chart.php generates the chart and using html2canvas stores the image datatauri into localstorage.
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>
这是PHP脚本使用生成的PDF FPDF库
This is the php script which generates the pdf using fpdf library
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页面。同时发送URI沿着URL不会工作，无论是作为URL变得过大，超出了它的能力。
How do i send the such a big uri to this php script ? Trying an ajax wont work as I need to redirect to this php page. Also sending the uri along in the url wont work either as the url becomes too large and goes beyond its capacity.
推荐答案
在您的剧本
<script>
document.getElementById('imageURL').value=canvas.toDataURL("image/png");
</script>
在乌拉圭回合身上带有报告按钮和一个隐藏字段的URL创建一个表单：
create a form in ur body with a report button and an hidden field for 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'];
?>
希望它帮助。
Hope it helps.
修改
<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>
这篇关于如何通过图像数据的URI从JavaScript到PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
