Как сделать ajax Post, не открывая страницу

Поскольку вашей основной целью является «сохранение изображения» холста, но по каким-то особым причинам вы не хотите использовать две отдельные страницы (одну HTML и одну PHP), мы можем объединить необходимые функции в один файл PHP. который выполняет оба следующих действия

1. создание холста
2. сохранение файла изображения

Есть два немного разных метода сделать вышеперечисленное: один использует ajax, а другой нет.

Для обоих методов будет создан и сохранен файл PNG в папке, известной как «изображения», поэтому убедитесь, что эта папка у вас есть, и убедитесь, что система доступна для записи в эту папку.

Способ 1 — использовать ajax (вызов самого себя)

Имя PHP: saveimagecanvas1.php

<?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;
}

if ($_POST['imgData']! = "") {

$image = $_POST['imgData'];

$x1=   chr(rand(0,25)+97) ;
$x2=   chr(rand(0,25)+97) ;
$x3=   chr(rand(0,25)+97) ;
$x4=   chr(rand(0,9)+48) ;
$x5=   chr(rand(0,9)+48) ;

$path = "./images/".$x1.$x2.$x3.$x4.$x5;

save_base64_image($image, $path, $path_with_end_slash = "" );

echo "Image saved - inside the 'images' folder " .$path ;
exit();
}

?>


<script
  src = "https://code.jquery.com/jquery-3.7.1.js"
  integrity = "sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4 = "
  crossorigin = "anonymous"></script>


<div id=ajaxreturn></div>

<canvas id = "chart1" width = "200" height = "100" >

<script>
   var c = document.getElementById("chart1");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.arc(95, 50, 40, 0, 2 * Math.PI);
   ctx.stroke();
</script>



<script>

function submitdata() {

   var canvas = document.getElementById('chart1');
   var imgData = canvas.toDataURL('image/png', 1);
  
         $.ajax({
            type: "POST",
            url: "saveimagecanvas1.php",
            data: { imgData: imgData },
            success: function(response) {
               document.getElementById('ajaxreturn').innerHTML=response;
            }
        });
}


window.onload = () => {
  submitdata();
}

</script>

Способ 2 – не используйте ajax, а используйте отправку формы для отправки данных самому PHP.

Имя PHP: saveimagecanvas2.php

<?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;
}

if ($_POST['imgData']! = "") {

$image = $_POST['imgData'];

$x1=   chr(rand(0,25)+97) ;
$x2=   chr(rand(0,25)+97) ;
$x3=   chr(rand(0,25)+97) ;
$x4=   chr(rand(0,9)+48) ;
$x5=   chr(rand(0,9)+48) ;

$path = "./images/".$x1.$x2.$x3.$x4.$x5;

save_base64_image($image, $path, $path_with_end_slash = "" );

echo "Image saved - inside the 'images' folder " .$path ;

exit();
}

?>


<script
  src = "https://code.jquery.com/jquery-3.7.1.js"
  integrity = "sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4 = "
  crossorigin = "anonymous"></script>


<canvas id = "chart1" width = "200" height = "100" >

<script>
   var c = document.getElementById("chart1");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.arc(95, 50, 40, 0, 2 * Math.PI);
   ctx.stroke();
</script>



<script>

function submitdata() {

   var canvas = document.getElementById('chart1');
   var imgData = canvas.toDataURL('image/png', 1);
document.getElementById('imgData').value=imgData;
document.getElementById('form1').submit();

}



window.onload = () => {
  submitdata();
}


</script>

<form id=form1 action = "#" method=POST>
<input type=hidden name=imgData id=imgData>
</form>

Примечание. Для демонстрации я нарисовал на холсте круг, чтобы вы могли что-то сохранить в виде изображения, но, конечно, вы можете использовать любой метод для рисования графики на холсте.

Результат:

один файл php создаст файл, известный как bse38.png внутри папки изображений.