如何將圖像數據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