Google chart images store into the folder using PHP, jquery and HTML

How to convert google chart images from base64 to png images and store into the folder, Here let's go with an example

Explanation 1.

Here the chart_div to generated a chart with image using google chart javascript as mention under the index.php code.

<div class="container" id="div_chart">
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <form method="post" id="frm_img" action="store_img.php">
    <input type="hidden" name="hidden_chart_html" id="hidden_chart_html" />
    <button type="button" name="store_img" id="store_img" class="btn btn-danger btn-xs">Add chart Img</button>
   </form>
</div>

Explanation 2.

After creating a chart then submit to the server to store images using hidden variable with jquery function.

$(document).ready(function(){
 $('#store_img').click(function(){
  $('#hidden_chart_html').val($('#div_chart').html());
  $('#frm_img').submit();
 });
});

Explanation 3.

Get a html content in post variable, now we need to access as image tag to get image url and convert into the image using file_get_contents() functions. and store into the images folder if you not created please create the images folder to store image.

and then display the images in the page using echo with image tag from stored images in images folder path.

 $html = $_POST["hidden_chart_html"];

$doc = new DOMDocument();
@$doc->loadHTML($html);
$tags = $doc->getElementsByTagName('img');
$imagename = "images/google_chart.png";
foreach ($tags as $tag) {
         $img_src = $tag->getAttribute('src');
         file_put_contents($imagename, file_get_contents($img_src));
   $i++;
}
echo $result ='<img src="'.$imagename.'">';

Now, created finale files to run in your system

1. CREATE A Index.php

<html>
  <head>
    <!--Load the AJAX API-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

            var chart_area = document.getElementById('chart_div');
            var chart = new google.visualization.PieChart(chart_area);

            google.visualization.events.addListener(chart, 'ready', function(){
             chart_area.innerHTML = '<img src="' + chart.getImageURI() + '" class="img-responsive">';
            });

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <h1> Store Google chart Images to Folder using php </h1>
<div class="container" id="div_chart">
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <form method="post" id="frm_img" action="store_img.php">
    <input type="hidden" name="hidden_chart_html" id="hidden_chart_html" />
    <button type="button" name="store_img" id="store_img" class="btn btn-danger btn-xs">Add chart Img</button>
   </form>
</div>
  <script>
$(document).ready(function(){
 $('#store_img').click(function(){
  $('#hidden_chart_html').val($('#div_chart').html());
  $('#frm_img').submit();
 });
});
</script>
  </body>
</html>

2. CREATE A store_img.php

<?php

if(isset($_POST["hidden_chart_html"]) && $_POST["hidden_chart_html"] != '')
{
 $html = $_POST["hidden_chart_html"];

$doc = new DOMDocument();
@$doc->loadHTML($html);
$tags = $doc->getElementsByTagName('img');
$imagename = "images/google_chart.png";
foreach ($tags as $tag) {
         $img_src = $tag->getAttribute('src');
         file_put_contents($imagename, file_get_contents($img_src));
}
echo $result ='<img src="'.$imagename.'">';
}
?>

OUTPUT :

Programming Technology World