代码之家 › 专栏 › 技术社区 › Blues Clues

使用html2canvas的Laravel不保存图片

html2canvas laravel

Blues Clues · 技术社区 · 6 年前

我正在尝试使用html2canvas和laravel。但是当我点击 Save Report 按钮,图片没有保存。我也没有得到任何错误。请看下面我的代码。

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');

1 回复 | 直到 6 年前

H45H 6 年前

试试这个:

 public function save(){
       // decode your image first.
       $imagedata = base64_decode($_REQUEST['base64data']);
       // make random name
       $filename = md5(uniqid(rand(), true));
       //path where you want to upload image
       $file = $_SERVER['DOCUMENT_ROOT'] . '/uploads/'.$filename.'.png';
       file_put_contents($file,$imagedata); <-- Please follow this.
    }