Question

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

这是使用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变得太大而超出其容量。

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'];
?>

希望它有所帮助。

修改

Answer 2

你也可以从base64创建文件并将其发送到服务器，就像这个post一样（从ie10和所有现代浏览器开始工作）

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

2 个答案: