如何将图像数据uri从javascript传递到php
[英]how to pass Image data uri from javascript to php
问题描述
I have a webpage which displays a chart. 
我有一个显示图表的网页。 I had to generate a pdf of this chart. 我必须生成此图表的pdf。 So I wrote this code to capture the chart as an image and put inside the pdf. 因此，我编写了此代码，以将图表捕获为图像并放入pdf内。 I used html2canvas for this which generated a data uri for the image. 我为此使用html2canvas，它为图像生成了数据uri。 Now I am stuck with this uri in javascript. 现在，我在javascript中遇到了这个问题。 The pdf code is a php script which needs this uri. pdf代码是需要此uri的php脚本。 How do I do this ? 我该怎么做呢 ？ The chart.php generates the chart and using html2canvas stores the image datatauri into localstorage. chart.php生成图表，并使用html2canvas将图像数据tauri存储到本地存储中。
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 这是使用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();*/
?>
How do i send the such a big uri to this php script ? 我如何发送这么大的uri到这个PHP脚本？ Trying an ajax wont work as I need to redirect to this php page. 尝试Ajax无法正常工作，因为我需要重定向到此php页面。 Also sending the uri along in the url wont work either as the url becomes too large and goes beyond its capacity. 由于URL太大而超出其容量，因此也无法在URL中发送uri。
2 个解决方案
解决方案1
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 : 使用报告按钮和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页面中-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>
解决方案2
0 2015-08-04 07:07:19
您也可以从BASE64 creaate文件并将其发送到服务器，想在这个岗位 （工作从IE10和所有现代浏览器）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.