how to convert view file in image and return in api in laravel

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.

I am using html2canvas.

routes are:

$router->POST('savecard', 'HomeController@SaveCard');
 $router->get('save-capture/{image_for_save}', 'HomeController@savecapture');

I have to call savecard by POSTMAN and run some code and then I have a blade file template1.blade.php

My controller is:

public function SaveCard(Request $request)
{
$find_edittemplate_id = edittemplate::select('id')->where('user_id','=',$request->user_id)->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()->json(['CardSave' => $image, 'message' => 'Success'], 201);
   }

After view template1 file, I created ajax call for convert image to template1.blade.php.

savecapture() will run on template1.blade.php by ajax

view is:

<!DOCTYPE html>
<html>
<head>
    <title>Template One</title>
    <link href="{{ url('css/style1.css') }}" rel="stylesheet" />
    <link href="{{ url('css/font-awesome.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link href="../css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div class="row" id="mydiv_screenshot">
   <div class="col-md-12 col-sm-12">
     <!-- Logo_Section -->
     <div class="row text-center backgroundf0f0f0 pd20">
     <div class="logo col-md-6 col-sm-8 col-sm-offset-2 col-md-offset-3">
     <img src="{{ url('images/logo.png') }}" alt="Logo" width="100%" height="auto" max-height="130px"/>
     </div>
     <div class="col-md-12 col-sm-12 businessheadlineblack pdt5">
     <h3>Digital Business Card</h3>
     </div>
     </div>
    </div>
 </div>
    </body>
 <!-- Latest compiled and minified JavaScript -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
 integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
 crossorigin="anonymous"></script>
</html>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script>
    $(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
                });
            });
        });
    </script>

But It show in postman complete blade file and also not run ajax.

artcore

5 years ago

Level 5

You can simple return a string which will be the response for your ajax call

return view('template1')->render();

vinubangs

5 years ago

Level 1

sorry. not working

Please or to participate in this conversation.