преобразовать данные div в изображение, используя html2canvas и php - PullRequest
Новая
       9

преобразовать данные div в изображение, используя html2canvas и php

0 голосов
/ 14 января 2019

Я хочу преобразовать мои данные div в изображение и сохранить их в директории и базе данных, используя Ajax-запрос при нажатии кнопки. Код работает хорошо и хранит данные как в директории, так и в БД, но проблема в том, что когда я нажимаю кнопку в первый раз, он ничего не делает, но когда я нажимаю кнопку во второй раз и так далее, он правильно сохраняет изображение в обоих мест. Я не знаю, где я иду не так, любое предложение будет высоко оценено. Спасибо!

Код моего просмотра: 

<div id='calendar'>-- Data I want to convert to image --</div>

<form method="post" enctype="multipart/form-data" id="myForm">
    {{csrf_field()}}
    <input type="hidden" name="img_val" id="img_val" value="" />
    <input type="submit" id="take_shot" value="Take Screenshot"/>
</form>

Мой код Jquery: 

<!-- Canvas Jquery Code for saving screenshot -->
<meta name="csrf-token" content="{{ csrf_token() }}" /> 
<meta name="screenShot" content="{{url('htmlcanvas')}}">

<script>
$.ajaxSetup({
    headers: {

        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
</script>

<script type="text/javascript">
$(document).ready(function(){
 var dataurl = "";
 $('#take_shot').click(function(){
    $('#calendar').html2canvas({
        onrendered: function (canvas) {
            //Set hidden field's value to image data (base-64 string)
            dataurl = $('#img_val').val(canvas.toDataURL("image/png"));
        }
    });
    var form_data = new FormData($("#myForm")[0]);

        $.ajax({
            type:'POST',
            url: $('meta[name="screenShot"]').attr('content'),
            data : form_data,
            cache: false,
            processData: false,
            contentType: false,

            success:function(data){
                alert(data);
            }
        }); 

    return false;
 });
});
</script>

Код моего контроллера: 

    public function storeImageHtmlCanvas(Request $request)
        {
            if($request->ajax()) {
                if($request->img_val != null)
                {
                   $dbImage = new Admin_Image;
                   $data_uri = $request->img_val;
                   $encoded_image = explode(",", $data_uri)[1];
                   $decoded_image = base64_decode($encoded_image);
                   $path = storage_path() . '/screenshots/';
                   $file_name = time();
                   file_put_contents($path.$file_name.".png", $decoded_image);
$dbImage->admin_image =  $file_name.".png" ;
$dbImage->save();
                   $output = "success";   
                }
                return response()->json($output);
            }
        }

1 Ответ

0 голосов
/ 14 января 2019

html2canvas является асинхронным (~ = выполняется в фоновом режиме, в то время как сценарий продолжает выполняться), поэтому при выполнении первого запроса Ajax dataurl не определено.

Вам необходимо запустить запрос AJAX внутри функции onrendered, например, 

    $('#take_shot').click(function(){
        $('#calendar').html2canvas({
            onrendered: function (canvas) {


            //Set hidden field's value to image data (base-64 string)
            dataurl = $('#img_val').val(canvas.toDataURL("image/png"));

            // dataurl is defined, you can trigger the ajax request
            var form_data = new FormData($("#myForm")[0]);

            $.ajax({
                type:'POST',
                url: $('meta[name="screenShot"]').attr('content'),
                data : form_data,
                cache: false,
                processData: false,
                contentType: false,

                success:function(data){
                    alert(data);
                }
            }); 

            }
        });

        return false;
     });
    });
...