title: how to convert view file in image and return in api in laravel
body: <p>I am creating an API in laravel. In which, I have to convert blade file into image and should return path of converted image or base64 in api. </p>
  
  <p>I am using html2canvas.</p>
  
  <p>routes are:</p>
  
  <pre><code> $router-&gt;POST('savecard', 'HomeController@SaveCard');
   $router-&gt;get('save-capture/{image_for_save}', 'HomeController@savecapture');
  </code></pre>
  
  <p>I have to call <strong>savecard</strong> by <strong>POSTMAN</strong> and run some code and then I have a blade file template1.blade.php</p>
  
  <p>My controller is:</p>
  
  <pre><code>public function SaveCard(Request $request)
  {
  $find_edittemplate_id = edittemplate::select('id')-&gt;where('user_id','=',$request-&gt;user_id)-&gt;first();
  return view('template1');
  }
  
      public function savecapture($image_for_save)
  {
      $image = $image_for_save;
      $image = explode(";", $image)[1];
  
      // Remove base64 from left side of image data
      // and get the remaining part
      $image = explode(",", $image)[1];
  
      // Replace all spaces with plus sign (helpful for larger images)
      $image = str_replace(" ", "+", $image);
  
      // Convert back from base64
      $image = base64_decode($image);
      $destinationPath = storage_path('uploads/');
  
      file_put_contents($destinationPath,'temp.png',$image);
  
      return response()-&gt;json(['CardSave' =&gt; $image, 'message' =&gt; 'Success'], 201);
     } 
  </code></pre>
  
  <p>After view template1 file, I created ajax call for convert image to template1.blade.php.</p>
  
  <p>savecapture() will run on template1.blade.php by ajax</p>
  
  <p>view is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Template One&lt;/title&gt;
      &lt;link href="{{ url('css/style1.css') }}" rel="stylesheet" /&gt;
      &lt;link href="{{ url('css/font-awesome.min.css') }}" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
      &lt;link href="../css/font-awesome.min.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="row" id="mydiv_screenshot"&gt;
     &lt;div class="col-md-12 col-sm-12"&gt;
       &lt;!-- Logo_Section --&gt;
       &lt;div class="row text-center backgroundf0f0f0 pd20"&gt;
       &lt;div class="logo col-md-6 col-sm-8 col-sm-offset-2 col-md-offset-3"&gt;
       &lt;img src="{{ url('images/logo.png') }}" alt="Logo" width="100%" height="auto" max-height="130px"/&gt;
       &lt;/div&gt;
       &lt;div class="col-md-12 col-sm-12 businessheadlineblack pdt5"&gt;
       &lt;h3&gt;Digital Business Card&lt;/h3&gt;
       &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
      &lt;/body&gt;
   &lt;!-- Latest compiled and minified JavaScript --&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
   integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
   crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/html&gt;
  
  &lt;script src="https://html2canvas.hertzen.com/dist/html2canvas.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function() {
      window.scrollTo(0, 0);        
    html2canvas(document.getElementById("mydiv_screenshot")).then(function (canvas) {
   var ajax = new XMLHttpRequest();
   var image_data = canvas.toDataURL("image/jpeg", 0.9);
     $.ajax({
                  url: '{{ url("save-capture") }}',
                  type: 'GET',
                  data: {"image_for_save": image_data},
                  success: function(response){
                      if(response != 0){
                          //console.log(response);
                      }else{
                          //console.log(response);
                      }
                  }, 
                  async: true
                  });
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>But It show in postman complete blade file and also not run ajax.</p>