时间戳

首页 > 解决方案 > 带有html2canvas的Laravel不保存图片

laravel - 带有html2canvas的Laravel不保存图片

问题描述

我正在尝试使用 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');

标签： laravelhtml2canvas

解决方案

试试这个：

 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.
    }

推荐阅读