我尝试将chart.js图像转换为url,然后使用ajax发布它,如果ajax和图像保存功能在同一个php文件中,则成功。我尝试将 url 发布到另一个文件而不是同一个文件,但 ajax 没有返回任何带有
$image = $_POST['imgData'];
的内容。如果ajax和保存功能位于不同的文件上,我需要先打开ajax文件,然后图像将保存到目录
测试.php
var canvas = document.getElementById('chart1');
var imgData = canvas.toDataURL('image/png', 1);
$.ajax({
type: "POST",
url: "function.php",
data: { imgData: imgData },
success: function(response) {
console.log(response);
}
});
</script>
函数.php
function save_base64_image($base64_image_string, $output_file_without_extension, $path_with_end_slash="" ) {
$splited = explode(',', substr( $base64_image_string , 5 ) , 2);
$mime=$splited[0];
$data=$splited[1];
$mime_split_without_base64=explode(';', $mime,2);
$mime_split=explode('/', $mime_split_without_base64[0],2);
if(count($mime_split)==2)
{
$extension=$mime_split[1];
if($extension=='jpeg')$extension='jpg';
$output_file_with_extension=$output_file_without_extension.'.'.$extension;
}
file_put_contents( $path_with_end_slash . $output_file_with_extension, base64_decode($data) );
return $output_file_with_extension;
}
$image = $_POST['imgData'];
$path='images/chart_1';
save_base64_image($image, $path, $path_with_end_slash="" );
即使保存图片,img 标签也无法获取路径,因为图片函数同时运行。在保存图像函数运行之前先到达图像路径
我认为你的图表图像渲染花费了很长时间。
在这种情况下,ajax 在将图表图像发送到 function.php 时将不会成功,因为图像尚未渲染。
在这种情况下,您可以在通过 ajax 提交数据之前注入短暂的延迟(例如 3 秒)——比如使用
setTimeout()
:
因此将您的 test.php 更改为
<script>
function submitdata(){
var canvas = document.getElementById('chart1');
var imgData = canvas.toDataURL('image/png', 1);
$.ajax({
type: "POST",
url: "function.php",
data: { imgData: imgData },
success: function(response) {
console.log(response);
}
});
}
setTimeout(() => {
submitdata();
}, "3000");
</script>