如何在不打开页面的情况下进行ajax Post

问题描述 投票：0回答：1

我尝试使用 

toDataURL
使 Ajax 发布 URl，ajax 调用是在 
test.php
中进行的。我的保存功能已开启 
save.php
。我的问题是，如果我先打开
test.php
，则图像可以保存，然后图像将出现在我的目录中。我想要的是打开时保存图像
save.php
。可以这样做吗？

测试.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();
});

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

我也尝试使用这个功能

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);

打开时我的图像已保存

save.php
但我的图像不包含任何内容（空白）。

php jquery ajax charts
1个回答
0
投票

由于您的主要目的是完成画布的“保存图像”，但您不想使用两个独立的页面（一个HTML和一个PHP），所以我们可以使用两种不同的方法来做到这一点，但原理是相似的--- 将所需的函数合并到单个 PHP 文件中，该文件执行以下两项操作

  1. 生成画布
  2. 保存图像文件

方法1 - 使用ajax（调用自身）

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>


<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.