Сохранить график как изображение после нажатия на ссылку полный скрипт

У меня есть этот код

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
    <script type="text/javascript" src="js/chart-js/Chart.js"></script>
    <script type="text/javascript">
        var data = [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            }
        ];

        $(document).ready( 
            function () {
                var ctx = document.getElementById("myChart").getContext("2d");
                var myNewChart = new Chart(ctx).Pie(data);
                document.getElementById("canvas_link").src = document.getElementById("myChart").toDataURL();                 
            }
        );
    </script>
</head>
<body>
    <p><a href="#" id="canvas_link">save as image</a></p>
    <canvas id="myChart" width="400" height="400"></canvas>
    <p><a href="">export to pdf</a></p>
</body>

Мне нужно создать экспорт в PDF и добавить в изображение с родовым графиком. Berofe Я должен сохранить изображение рендера. Я пытаюсь использовать метод.toBase64Image(), но я не знаю, могу ли я начать.

Мой приступ

создать canvas_link (.toDataUrl). После нажатия кнопки "Сохранить как изображение" я могу загрузить и загрузить изображение на сервер. Затем я могу сгенерировать экспорт PDF (через mPDF) и добавить imageto в экспорт. Это я могу создать, но я не знаю, создать и загрузить изображение графика на сервер.

Мне нужно больше примеров из http://www.chartjs.org/docs/

Источник

2 ответа

В этом случае вам не нужно загружать изображение. Вы можете поместить результат вызова функции toDataUrl в значение скрытого поля и отправить его в форме (с целевым элементом iframe) или с помощью вызова ajax

используйте следующие параметры в таблице

//new options var
var options = {
    bezierCurve : false,
    //animation: false
    onAnimationComplete: done
};

//your code with a little modification
$(document).ready( 
    function () {
        var ctx = document.getElementById("myChart").getContext("2d");

        //use the previously defined "options" here!!!
        var myNewChart = new Chart(ctx).Pie(data, options);
    }
);

//callback function, called when the pie ends his animation
function done(){
    //this part of your code was moved here to avoid that store an empty image
    document.getElementById("canvas_link").src = document.getElementById("myChart").toDataURL();

    var postdata={
      file: document.getElementById("myChart").toDataURL()
    }
    $.post( "store.php", postdata)
      .done(function( ret ) {
        console.log( "Data status: Loaded successfully ");
      })
      .fail(function( ret ) {
        console.log( "Data status: error ");
      })
    ;
}

Ссылка: http://api.jquery.com/jquery.post/

в PHP вы можете обрабатывать контент таким образом

// file: store.php

// Interpret data uri
$uriPhp = 'data://' . substr($file, 5);
// Get content
$binary = file_get_contents($uriPhp);

$file = 'uploads/charts/'. time() .'.png';

// Save image
file_put_contents($file, $binary);

Ссылка: https://github.com/nnnick/Chart.js/issues/99

Источник

Согласно документации, вы можете распечатать или сохранить график с помощью вызовов API;

пример

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "theme2",
    title:{
        text: "Print Chart using print() method"              
    },
    data: [              
    {
        type: "column",
        dataPoints: [
            { label: "apple",  y: 10  },
            { label: "orange", y: 15  },
            { label: "banana", y: 25  },
            { label: "mango",  y: 30  },
            { label: "grape",  y: 28  }
        ]
    }
    ]
});

chart.render();
document.getElementById("printChart").addEventListener("click",function(){
    chart.print();
    //chart.exportChart({format: "jpg"});
});
Источник
Другие вопросы по тегам