вызов php страницы и выполнение JavaScript на этой странице - PullRequest
0 голосов
/ 13 апреля 2020

Я генерирую pdf (TCPDF) из html, и в pdf должна быть гистограмма с накоплением. Для диаграммы я создал диаграмму страницы. php и добавил на нее следующий код, который создает диаграмму, а также выводит диаграмму в виде изображения, затем, используя запись jquery, я сохраняю изображение на сервере (диаграмма. php):

<?php
if (strtoupper($_SERVER['REQUEST_METHOD']) == 'POST') {
    if (isset($_POST["picture"])) {
        $t = time();
        $data = base64_decode($_POST['picture']);
        file_put_contents('img/'.$t.'.jpg', $data);
        exit;
    }
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<html>
<body>
    <form id="imgForm" action="" method="post">

        <div style="width:800px;height:450px;">
            <canvas id="canvas" height="450" width="600"></canvas>

            <img id="canvasimage" />
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <script type="text/javascript">
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                barPercentage: 0.5,
                barThickness: 6,
                maxBarThickness: 8,
                minBarLength: 2,
                data: [5, 15, 20, 30, 40, 50, 60, 70],
                backgroundColor: ["red", "blue", "green", "blue", "red", "blue"]
            }]

        }

        function done() {

            var url = document.getElementById("canvas").toDataURL("image/jpg");
            document.getElementById("canvasimage").src = url;

            var image = $('#canvasimage').attr('src');
            var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, "");
            var formData = new FormData();
            formData.append('picture', base64ImageContent);

            $.ajax({
                type: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: formData
            }).done(function(e) {
                console.log(e);
            });
        }
        var options = {
            scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true,
                    beginAtZero: true
                }]
            },
            animation: {
                onComplete: done
            }
        };


        var myBarChart = new Chart(document.getElementById("canvas").getContext("2d"), {
            type: 'bar',
            data: data,
            options: options
        });
    </script>
</body>

</html>

Можно ли выполнить эту страницу с другой страницы php? так что эта страница (диаграмма. php) вызывается в фоновом режиме и сохраняет изображение?

Буду признателен за любую помощь

Спасибо

РЕДАКТИРОВАТЬ :

Вот как я называю диаграмму. php page

$("#btntest").click(function(){

            $.ajax({
                type: "POST",
                url : 'chart.php',
            }).done(function(e) {
                console.log(e);
            });
        });

my console.log (e) показывает всю диаграмму. php страница в формате html.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...