Question

我正在尝试使用Ajax（无jQuery）和POST将画布数据传递到.php文件。

不幸的是，我的.php文件中的$ _POST为NULL。

JS

function takepicture()
{
  //...
  var canvasData = canvas.toDataURL("image/png");

  const req = new XMLHttpRequest();
  req.open('POST', '../controller/pictureController.php', true);

  req.onreadystatechange = function() {
      // XMLHttpRequest.DONE === 4
      if (this.readyState === XMLHttpRequest.DONE) {
          if (this.status === 200) {
              console.log("Response: %s", this.responseText);
          } else {
              console.log("Response status : %d (%s)", this.status, this.statusText);
          }
      }
  };

  req.send(canvasData);
}

PHP

saveData($_POST['canvasData']);

function saveData($data)
{
    $input = $data;
    //...
    file_put_contents($output, file_get_contents($input));
}

响应为：file_get_contents(): Filename cannot be empty，因为var_dump(canvasData)是NULL。

当我从JS部分进行console.log canvasData时，图像字符串出现了，所以我猜有些东西通过send(canvasData)传递了吗？

如何在php文件中获取数据？

Answer 1

使用ajax将图像数据发送到后端脚本进行处理的快速编写的演示。您对setRequestHeader的使用是正确的-一旦有了有效的ajax函数，最好使用它而不是每次IMO都重写它。

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();
        print_r( $_POST );
        exit();
    }   
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>xhr - canvas - image data</title>
        <style>
            canvas{width:346px;height:288px;}
        </style>
        <script>

            const url=location.href;    //  ../controller/pictureController.php



            const takepicture=function( canvas ){
                let callback=function(r){
                    document.querySelector('pre').innerHTML=r
                }
                let xhr=new XMLHttpRequest();
                    xhr.onreadystatechange=function(){
                        if( this.readyState==4 && this.status==200 )callback( this.response );
                        console.info('state: %s status: %s',this.readyState,this.status)
                    };
                    xhr.open( 'POST', url, true );
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                    xhr.send( 'canvasData='+canvas.toDataURL('image/png') );
            }


            document.addEventListener('DOMContentLoaded', e=>{
                let img=new Image();
                    img.onload=function(){

                        let canvas=document.querySelector('canvas');
                            canvas.width=img.width;
                            canvas.height=img.height;

                        let ctxt=canvas.getContext('2d');
                            ctxt.drawImage( img, 0, 0, img.width, img.height );

                        takepicture( canvas );                      
                    }
                img.src='/images/tmp/girl.jpg';
            });
        </script>
    </head>
    <body>
        <canvas></canvas>
        <pre></pre>
    </body>
</html>

演示/测试中使用的源图像

来自ajax请求的响应可以在图像下方看到，并由ajax回调填充到pre标记中

Ajax不会将数据传递到php文件

1 个答案: