¿Cómo podría guardar un gráfico canvasJS exportado en el directorio del lado del servidor usando PHP?
No hay problema al crear un gráfico circular, hacerlo exportable y exportarlo directamente usando la función js incorporada:
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"}); } }); }Mi objetivo es guardar ese archivo creado por js en un directorio en mi servidor (sé que js es del lado del cliente), ¿hay alguna forma de hacerlo?
Para cualquiera que enfrente este problema, logré resolverlo. Recorrí todos mis lienzos usando toDataURL() JS y luego los envié a través de AJAX. Lo logré primero enviando los datos de la imagen en formato PNG en mi JS:
$("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" }); } });Y luego capturarlo y guardarlo en el lado del servidor usando 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);