javascript — получить DataUrl изображения из CanvasJS и отправить с переполнением стека
Я хочу использовать CanvasJS нарисовать диаграмму. я нуждаюсь image.png но это делает DataUrl. Так что я должен сохранить это DataUrl в моем хосте как image.png а затем использовать его в моем проекте.
Это ссылка на пример изображения.
Я сделал следующее, но это дало мне изображение, которое было черной страницей (там не было диаграммы).
У меня есть два файла:
index.php, makeImage.php
Первый файл
index.php:
<!DOCTYPE HTML>
<html>
<head>
<?php
$x = [];
$x[] = ['label'=>"hamid", 'y'=>100];
$x[] = ['label'=>"Reza", 'y'=>200];
$x[] = ['label'=>"Behzad", 'y'=>200];
$x = json_encode($x);
echo '<script type="text/javascript">';
echo 'var myVar='.$x.';';
echo '</script>';
?>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript">
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Hamid test chart "},
data: [
{
type: "doughnut",
dataPoints: myVar
}
]
});
chart.render();
$('.canvasjs-chart-toolbar div>:nth-child(2)').click();
var X = chart.canvas.toDataURL();
window.onload = function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("POST", "makeImag.php" , true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("foo=" + X);
}
</script>
</body>
</html>
Второй файл
makeImage.php:
$data = $_POST["foo"];
$type=['jpg', 'png', 'gif'];
if (preg_match('/^data:image\/(\w+);base64,/', $data, $type)) {
$data = substr($data, strpos($data, ',') + 1);
$type = strtolower($type[1]); // jpg, png, gif
if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {
throw new \Exception('invalid image type');
}
$data = base64_decode($data);
if ($data === false) {
throw new \Exception('base64_decode failed');
}
} else {
throw new \Exception('did not match data URI with image data');
}
file_put_contents("image.{$type}", $data);
мой makeImage.php работает нормально, если я поставлю DataUrl какого-то изображения в $ данных. Сохраняет изображение в хосте очень хорошо.
Но когда я отправляю DataUrl с помощью makeImage.php Я получаю черную страницу в моем файле png. В чем моя проблема?
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …