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

Question

我有一个显示图表的网页。 我必须生成此图表的pdf。 因此，我编写了此代码，以将图表捕获为图像并放入pdf内。 我为此使用html2canvas，它为图像生成了数据uri。 现在，我在javascript中遇到了这个问题。 pdf代码是需要此uri的php脚本。 我该怎么做呢？ 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>

这是使用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太大而超出其容量，因此也无法在URL中发送uri。

Answer 1

在您的脚本中 ：

<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>

Answer 2

您也可以从BASE64 creaate文件并将其发送到服务器，想在这个岗位（工作从IE10和所有现代浏览器）

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

问题描述

2 个解决方案

解决方案1
1 2015-08-04 05:55:04

解决方案2
0 2015-08-04 07:07:19

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

问题描述

2 个解决方案

解决方案1 1 2015-08-04 05:55:04

解决方案2 0 2015-08-04 07:07:19

解决方案1
1 2015-08-04 05:55:04

解决方案2
0 2015-08-04 07:07:19