Laravel html2canvas Сохранить изображение в хранилище - PullRequest
Новая
       4

Laravel html2canvas Сохранить изображение в хранилище

0 голосов
/ 16 октября 2019

Я использую laravel 6. Я хочу сохранить скриншот, сгенерированный html2canvas. Я могу создать скриншот, но не могу сохранить его в хранилище. Я непрерывно ищу в сети в течение недели, но не нашел решения, которое мог бы реализовать. Вот полный код лезвия ларавеллы. 

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('css/app.css')}}">

    <!-- Styles -->
    <style>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links > a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }

        .toconvert{
            width: 1200px;
            height: 630px;
            border: 1px solid transparent;
            margin: 10px;
        }


    </style>
    <script type="text/javascript" src="{{asset('js/app.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/htmlcanvas.min.js')}}"></script>
</head>
<body>
    <div class="flex-center position-ref full-height">           

        <div class="contents" id="content">
            <div class="toconvert flex-center" id="toConvert">fggfgf
                <img crossorigin="anonymous" id="imgRowFb" 
src="{{ Request::get('img') }}" alt="">
            </div>
        </div>
        <button class="btn btn-info" id="save">Save</button>
    </div>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        $(document).ready(function () {

            $imgRowFb = $('#imgRowFb');             

            $heightIRF = $imgRowFb.height();
            $widthIRF = $imgRowFb.width();


            if ($widthIRF < 1200) {

                if ($heightIRF > 630) {
                    $imgRowFb.height('600');
                }
            }else{
                if ($heightIRF < 630) {
                    $imgRowFb.width('1150');
                }else{
                    $x = ($widthIRF - 1200)/2; // Extended Width
                    $y = $heightIRF - 630; // Extended Height

                    if ($x > $y) {
                        $imgRowFb.width('1150');
                    }else{
                        $imgRowFb.height('600');
                    }
                }
            }


            $('#save').click(function () {

                html2canvas(document.querySelector("#toConvert"),{
                    allowTaint:true,
                    backgroundColor:null,
                }).then(canvas => {
                    $(document.body).append(canvas);
                    var imgData = canvas.toDataURL('image/jpeg');
                    $.ajax({
                        type: 'POST',
                        url: '/operator/fbimage',
                        data: {img:imgData},
                        error: function (jqXHR, exception) {
                            var msg = '';
                            if (jqXHR.status === 0) {
                                msg = 'Not connect.\n Verify Network.';
                            } else if (jqXHR.status == 404) {
                                msg = 'Requested page not found. [404]';
                            } else if (jqXHR.status == 500) {
                                msg = 'Internal Server Error [500].';
                            } else if (exception === 'parsererror') {
                                msg = 'Requested JSON parse failed.';
                            } else if (exception === 'timeout') {
                                msg = 'Time out error.';
                            } else if (exception === 'abort') {
                                msg = 'Ajax request aborted.';
                            } else {
                                msg = 'Uncaught Error.\n' + jqXHR.responseText;
                            }
                            alert(msg);
                        },
                        success: function (res) {
                            alert(res);
                        }
                    });
                });

            });

        });
    </script>
</body>

Вот маршрут и контроллер 

Route::post('/operator/fbimage', 'AdminController@fbimage');

Контроллер 

public function fbimage(Request $request)
   {

    $pid = session('pid');

    $filename = 'fb_'.$pid.'.'.'png';

    $data = $request->imgData;
    //The rest is blank because I have tried tons of different code 
    //here but could not be successful.
 }

НаконецЯ возвращаюсь сюда. Мне нужно предложение.

...