title: convert div data to image using html2canvas and php
body: <p>I want to convert my div data to image and stored it in directory and db using Ajax request on button click. The code executes well and stores data both in directory and db but the problem is that when I click the button for first time it does not do anything but when I click button for the second time and so on it stores the the image correctly in both places.
  I don't know where i am going wrong, any suggestion would be highly appreciated.
  Thanks!</p>
  
  <p>My View code:</p>
  
  <pre><code>&lt;div id='calendar'&gt;-- Data I want to convert to image --&lt;/div&gt;
  
  &lt;form method="post" enctype="multipart/form-data" id="myForm"&gt;
      {{csrf_field()}}
      &lt;input type="hidden" name="img_val" id="img_val" value="" /&gt;
      &lt;input type="submit" id="take_shot" value="Take Screenshot"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My Jquery Code:</p>
  
  <pre><code>&lt;!-- Canvas Jquery Code for saving screenshot --&gt;
  &lt;meta name="csrf-token" content="{{ csrf_token() }}" /&gt; 
  &lt;meta name="screenShot" content="{{url('htmlcanvas')}}"&gt;
  
  &lt;script&gt;
  $.ajaxSetup({
      headers: {
  
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
   var dataurl = "";
   $('#take_shot').click(function(){
      $('#calendar').html2canvas({
          onrendered: function (canvas) {
              //Set hidden field's value to image data (base-64 string)
              dataurl = $('#img_val').val(canvas.toDataURL("image/png"));
          }
      });
      var form_data = new FormData($("#myForm")[0]);
  
          $.ajax({
              type:'POST',
              url: $('meta[name="screenShot"]').attr('content'),
              data : form_data,
              cache: false,
              processData: false,
              contentType: false,
  
              success:function(data){
                  alert(data);
              }
          }); 
  
      return false;
   });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My Controller code:</p>
  
  <pre><code>    public function storeImageHtmlCanvas(Request $request)
          {
              if($request-&gt;ajax()) {
                  if($request-&gt;img_val != null)
                  {
                     $dbImage = new Admin_Image;
                     $data_uri = $request-&gt;img_val;
                     $encoded_image = explode(",", $data_uri)[1];
                     $decoded_image = base64_decode($encoded_image);
                     $path = storage_path() . '/screenshots/';
                     $file_name = time();
                     file_put_contents($path.$file_name.".png", $decoded_image);
  $dbImage-&gt;admin_image =  $file_name.".png" ;
  $dbImage-&gt;save();
                     $output = "success";   
                  }
                  return response()-&gt;json($output);
              }
          }
  </code></pre>