how to pass Image data uri from javascript to php

Question

I have a webpage which displays a chart. I had to generate a pdf of this chart. So I wrote this code to capture the chart as an image and put inside the pdf. I used html2canvas for this which generated a data uri for the image. Now I am stuck with this uri in javascript. The pdf code is a php script which needs this uri. How do I do this ? The chart.php generates the chart and using html2canvas stores the image datatauri into 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>

This is the php script which generates the pdf using fpdf library

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

How do i send the such a big uri to this php script ? Trying an ajax wont work as I need to redirect to this php page. Also sending the uri along in the url wont work either as the url becomes too large and goes beyond its capacity.

insert url into a hidden variable in a form and get it in php page using post or get.. — madhu, Aug 04 '15 at 05:49
madhusoodan prabhu answer should give you what you need mate. — VMcreator, Aug 04 '15 at 06:34

score 1 · Answer 1 · edited Aug 04 '15 at 06:37

In your script :

<script>
document.getElementById('imageURL').value=canvas.toDataURL("image/png");
</script>

create a form in ur body with a report button and an hidden field for 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>

In your php page - pdfGen.php

<?php
$imageURL = $_REQUEST['imageURL'];
?>

Hope it helps.

EDIT

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

print the post variables in ur php page using print_r($_POST); and check if ur getting post variables correctly — madhu, Aug 04 '15 at 06:16
one more wthing document.getElementById('imageURL')=canvas.toDataURL("image/png"); should be document.getElementById('imageURL').value=canvas.toDataURL("image/png"); — VMcreator, Aug 04 '15 at 06:16
put document.getElementById('imageURL').value=canvas.toDataURL("image/png"); in your html2canvas onrendered function. — VMcreator, Aug 04 '15 at 06:23

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

You can also creaate file from base64 and send it to server, like in this post (works from ie10 and all modern browsers)

edited May 23 '17 at 12:29

Community

1
1

answered Aug 04 '15 at 07:07

Alex Nikulin

8,194
4
35
37

how to pass Image data uri from javascript to php

2 Answers2

Linked