How to make ajax Post without open the page

Question

I try to make Ajax post URl using toDataURL, ajax call is made in test.php. My save function is on save.php. My problem is the image can be save if i open test.php first, then the image will appear in my directory. What i want is saving the image when open save.php. Is it possible to do that?

test.php

function submitdata(){
var canvas = document.getElementById('chart1');
var imgData = canvas.toDataURL('image/png', 1);

        $.ajax({
            type: "POST", 
            url: "save.php",
            data: { imgData: imgData },
            success: function(response) {
            console.log(response);
            }
        });
}
$(document).ready(function() {
    submitdata();
}); 

save.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="" );

I also try to use this function

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'];

$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/';
$filename = $path . 'chart1_' . $x1 . $x2 . $x3 . $x4 . $x5.'.png';

save_base64_image($image, $path, $filename);

my image is save when i open save.php but my image did not contain anything (blank).

Answer 1

Since your main purpose is to accomplish "saving the image" of the canvas, but due to some special reasons you do not want to use two separate pages (one HTML and one PHP), we may merge the required functions into a single PHP file which performs both of the following

1. generating the canvas
2. saving the image file

There are two slightly different methods to do the above, one involves ajax and one does not.

For both of the two methods, it will generate and save the png file into a folder known as "images", so make sure you have this folder and make sure this folder is writable by the system

Method 1 - use ajax (calling itself)

PHP name: 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>

Method 2 - do not use ajax, but use form submission to submit data to the PHP itself

PHP name: 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>

Note: For demonstration, I have drawn a circle in the canvas so that you can have something to save as an image, but of course you can use whatever method to draw the graphic in the canvas.

Result:

the single php file will generate a file known as bse38.png insider the images folder