Untitled

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>

<?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();*/
 ?>

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

<?php

session_start();

$key = 'my-car'; // Your localstorage key
$reload = false;

$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

<script>
  window.localStorage.setItem('my-car', 'Tesla'); // Set to whatever you want
  var key = 'my-car';
  var data = {};
  data[key] = window.localStorage.getItem(key);
  jQuery.get(
    location.protocol + '//' + location.host + '/retrieve.php',
    data
  ).done(function (reload) {
    if (reload === 'true') {
      location.reload(); // When page reloads, php´s session contains correct localstorage data
    }
  });
</script>

<?php

start_session(); // Dont forget this

echo $_SESSION['my-car']; // Will print 'Tesla'

<?php

start_session();

$_SESSION['my-car'] = 'HONDA';

// This line is required to sync session with js
echo "<script>window.localStorage.setItem('my-car', " . $_SESSION['my-car'] . ");</script>";