how to pass Image data uri from javascript to php
Question
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>
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();*/
?>
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.
2 answers
solution1
1 2015-08-04 05:55:04
In your script :
<script>
document.getElementById('imageURL').value=canvas.toDataURL("image/png");
</script>
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>
In your php page - pdfGen.php
<?php
$imageURL = $_REQUEST['imageURL'];
?>
Hope it helps.
EDIT
<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>
solution2
0 2015-08-04 07:07:19
您也可以从BASE64 creaate文件并将其发送到服务器，想在这个岗位 （工作从IE10和所有现代浏览器）
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.