将chart.js图像转换为url并使用Ajax问题发布

Question

我尝试将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 标签也无法获取路径，因为图片函数同时运行。在保存图像函数运行之前先到达图像路径

Answer 1

我认为你的图表图像渲染花费了很长时间。

在这种情况下，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>