Laravel with html2canvas not saving the picture

I'm trying to use html2canvas and laravel. But when I click the Save Report button, the picture is not saving. I'm also not getting any error. Please see my code below.

index.blade.php

<body>
   <div class="container">
       <div class="content">
           <div class="title">Laravel 5</div>
           <p class="paragraph">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, veritatis dolores dicta at atque nobis maxime ea explicabo facilis molestiae voluptatibus nam nesciunt necessitatibus placeat ducimus magni nihil pariatur eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga adipisci magnam in. Earum, nihil, expedita, blanditiis, iste ipsam amet obcaecati culpa ad quod itaque esse facere veritatis ratione ipsum quis.
           </p>
           <p class="paragraph">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, veritatis dolores dicta at atque nobis maxime ea explicabo facilis molestiae voluptatibus nam nesciunt necessitatibus placeat ducimus magni nihil pariatur eligendi.
            </p>
       </div>
            
        <button id="saveReport">Save Report</button>
    </div>
        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

app.js

$(document).ready(function(){
    
    var element = $('.content');
    
    $('#saveReport').on('click', function(){
        html2canvas(element, {
            background: '#ffffff',
            onrendered: function(canvas){
                var imgData = canvas.toDataURL('image/jpeg');
                $.ajax({
                    url: 'save-dashboard-report',
                    type: 'post',
                    dataType: 'text',
                    data: {
                        base64data: imgData
                    }
                });
                alert('Success!');
                console.log(imgData);
            }
        });
    });
    
});

controller

public function save(){
        
    $data = $_REQUEST['base64data'];
    $image = explode('base64', $data);
    file_put_contents('1.jpg', base64_decode($image[1]));
        
}

routes

Route::post('save-dashboard-report', 'DashboardReportController@save');

s4muel

7 years ago

Best Answer

Level 50

you are missing a CSRF token.

add this to your html (head) meta tag (e.g. in the index.blade.php file):

<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    ...
<head>
...

and set it to be send with every ajax call like this (in app.js):

$.ajaxSetup({  
    headers: {  
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')  
    }  
});

and also make sure, the folder you are writing to, is writable. the file_put_contents('1.jpg', base64_decode($image[1])); just writes it to the public folder

... or disable the VerifyCsrfToken middleware in Kernel.php for web routes (but i do not recommend)

Jonjie

7 years ago

Level 12

@S4MUEL - You saved the day man. One more thing, what if I want to save it inside of public/dashboard-img?

s4muel

7 years ago

Level 50

@JONJIE - well the most simple way is to just specify any path you want in file_put_contents() but i suggest you make it more of a laravel way,

have a look at https://laravel.com/docs/5.7/filesystem documentation
configure a disk in laravel
make a symlink, so the disk (folder) is publicly available
use Storage::put() method to store that file https://laravel.com/docs/5.7/filesystem#storing-files

1 like

Jonjie

7 years ago

Level 12

@S4MUEL - I'm using laravel version 4.2; Any link for this version?

s4muel

7 years ago

Level 50

@JONJIE - oh, i see. there is a FileSystem class, that has put() method in it: https://laravel.com/api/4.2/Illuminate/Filesystem/Filesystem.html#method_put but it is just a wrapper on the file_put_contents, so i dont think it will make a big difference

1 like

billhssn

4 years ago

Level 1

@jonjie can you help me please

Jonjie

4 years ago

Level 12

Sure. But I recommend you to create new discussion so it will reach more developers; more developers can help you.

Please or to participate in this conversation.