将 localStorage 值传递给 php答案

【问题标题】：pass localStorage value into php将 localStorage 值传递给 php
【发布时间】：2015-10-24 23:13:03
【问题描述】：

我有一个生成图表的页面。我有一个为其生成pdf报告的按钮。我想创建这个图表的图像并将其插入到 pdf 中。为了创建图像，我使用html2canvas 并获取我存储在localstorage 中的dataurl。

chart.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
        $('#download').click(function() {
             $.ajax({
                type: "POST",
                url: "pdfGen.php",
                data: 'hello',
                success: function(data) {
                    alert("hi");
                }
              });
         });
   }); //END $(document).ready()
</script>

<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" class="button">Report</a> 
   ..more code to generate the chart
</body>

下载按钮调用使用 fpdf 生成报告的 pdfGen.php 脚本。 pdfGen.php

<?php
    echo $_POST['data']; //gives error
    /*$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();*/
 ?>

如何在 php 脚本中获取图像？我尝试进行 ajax 调用，但在 pdfGen.php 脚本中得到undefined index data。我收到警报 HI 但无法获取服务器上的数据。它似乎不起作用。

【问题讨论】：

使用 ajax 请求将其发布到服务器
ajax 是@charlietfl 所说的唯一方法
这可能会有所帮助：stackoverflow.com/questions/17973386/…
我尝试进行 ajax 调用，但失败了
@rkbom9 发生了什么错误？你试过什么代码？

标签： javascript php ajax html2canvas data-uri

【解决方案1】：

你的 ajax 调用是错误的。

您的调用应该是这样的，以在 data 变量/键中获取值 hello

$('#download').click(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "pdfGen.php",
       data: 'data=hello',
       success: function(data) {
           alert("hi");
       }
   });
});

要了解有关jQuery Ajax 的更多信息，请参阅此link。

【讨论】：

我们为什么要做preventdeafult。这可以防止调用脚本
我会推荐你详细阅读jQuery文档。

【解决方案2】：

这是一个将本地存储从 js 传递到 php 会话的示例，假设使用 jQuery 作为 ajax 请求者。

手柄

在根目录下，添加文件：retrieve.php（这将 RETRIEVE AND SYNC 来自 js 的本地存储与来自 php 的会话）

<?php

session_start();
$key = 'my-car'; // Your localstorage key
$client = (isset($_GET[$key]) && $_GET[$key] !== 'null') ? $_GET[$key] : null;
$server = isset($_SESSION[$key]) ? $_SESSION[$key] : null;
$_SESSION[$key] = $client; // Now stored in php´s session variable $_SESSION['my-car']

echo $client === $server ? 'true' : 'false'; // Tells js to reload if data was not synced

设置

在您的 index.html / index.php 中添加此脚本：（这将 PASS localstorage 到 php 并在未同步后重新加载php的会话数据已设置）

<?php
  session_start(); // Dont forget this line
  $key = 'my-car';
  if (isset($_SESSION[$key]) && $_SESSION[$key] !== null) {
     $car = json_decode($_SESSION[$key], true);
     echo $car['name']; // Will print 'Tesla'
  }
?>
<script>
  // Set in JS
  var key = '<?php echo $key; ?>';
  window.localStorage.setItem(key, JSON.stringify({
    name: 'Tesla'
  })); // Set to whatever you want
  var data = {};
  data[key] = window.localStorage.getItem(key);
  // Passes to PHP using GET
  jQuery.get(
    location.protocol + '//' + location.host + '/retrieve.php',
    data
  ).done(function (synced) {
    if (synced !== 'true') {
      // If not synced, reload
      location.reload();
      // Caution! If it doesnt sync correctly, infinite loop may occure
    }
  });
</script>

使用

最后，将会话从 PHP 传递到 js 中的本地存储 ->

在 ANY php 文件中：

<?php

start_session();
$key = 'my-car';

if (isset($_SESSION[$key]) && $_SESSION[$key] !== null) {
   // Print old value
   $car = json_decode($_SESSION[$key], true);
   echo $car['name']; // 'Tesla'

   // Update object
   $car['name'] = 'Honda';
   $_SESSION[$key] = json_encode($car);

   // Pass to js:
   echo "<script>window.localStorage.setItem('" . $key . "', '" . $_SESSION[$key] . "');</script>";

   // Prints the updated object with name 'Honda'
   echo "<script>console.log(window.localStorage.getItem('" . $key . "'))";
 }

注意：“my-car”可以替换为您自己的钥匙。

【讨论】：