将 canvasJS 图表保存到服务器目录

Question

如何使用 PHP 将导出的 canvasJS 图表保存到服务器端目录？

创建饼图时没有问题，使之可导出，直接使用自带的js函数导出：

function ajaxGrafTarta(llamada,titulo){
    $.ajax({
        url: "dashboard.php",
        data: {
            llamada: llamada
        },
        type: "GET",
        dataType: "json",
        success: function (data) {
            var chart = new CanvasJS.Chart(llamada, {
                animationEnabled: true,
                exportEnabled: true,
                exportFileName: llamada,
                title: {
                    text: titulo
                },
                data: [{
                    type: "pie",
                    startAngle: -90,
                    yValueFormatString: "#,##0.00\"%\"",
                    indexLabel: "{label} ({y})",
                    dataPoints: data
                }]
            });
            chart.render();

            chart.exportChart({format: "jpg"});
        }
    });
}

我的目标是将 js 创建的文件保存到我服务器的一个目录中（我知道 js 是客户端），有什么办法可以做到吗？

Answer 1

对于遇到这个问题的任何人，我设法解决了它。我使用 toDataURL() JS 函数遍历所有画布，然后通过 AJAX 发送它们。我首先在我的 JS 中发送了 PNG 格式的图像数据：

$("canvas").each(function() {
   var dataURL = ($(this)[0]).toDataURL("image/png");

   if(dataURL.indexOf("AAAAAAAA") == -1){
     var filename = $(this).parent().closest('.grafico').attr('id') + ".png";
     $.ajax({
        url: "guardar_graficos.php",
           data: {
               image: dataURL,
               filename: filename
               },
               type: "POST",
               dataType: "image/png"
            }); 
          }
      });

然后使用 PHP:

在服务器端捕获并保存它

$upload_dir = "foo/";
$iid = $_POST['image'];
$filename = $_POST['filename'];
$img_encode = str_replace('data:image/png;base64,', '', $iid);
$img = str_replace(' ', '+', $img_encode);
$data = base64_decode($img);
$file = $upload_dir.$filename;
unlink($upload_dir.$filename);
file_put_contents($file, $data);

将 canvasJS 图表保存到服务器目录

Save canvasJS charts to server directory

javascript

php

export

canvasjs