尝试将Base64（图像）文件保存到服务器，但文件为空。

Question

我希望你能够将画布图像保存到服务器文件夹中，但是检查后发现该文件为空。我使用AJAX将编码数据传递给我的PHP脚本，然后PHP脚本将其保存到服务器上，但是文件为空。

这是我的代码：

JS/AJAX：

function convertCanvasToImage(thecanvas) {
                var ajax = new XMLHttpRequest();
                ajax.open("POST",'testSave.php',false);
                ajax.setRequestHeader('Content-Type', 'application/upload');
                ajax.send(canvasData);
            }

PHP (testSave.php)：

    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

    $filteredData=substr($imageData, strpos($imageData, ",")+1);

    $unencodedData= base64_decode($filteredData);

    //echo "unencodedData".$unencodedData;

    $fp = fopen( 'test.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );

提前感谢您的任何帮助！

- drizzy

---

在将$imageData传入substr/base64函数之前，您是否检查过该变量是否包含任何内容？因为在PHP中获得空文件并不意味着这是PHP的问题。毕竟，在您的代码片段中，Ajax调用使用了canvasdata，但您没有在任何地方定义它，因此可能会发送一个JavaScript null/undefined。 - Marc B

当HTTP_RAW_POST_DATA未填充（取决于php.ini设置）时，从虚拟文件名php://input中读取。 - mario

尝试从 php://input 读取数据，即 $imageData = file_get_contents("php://input");。 - Musa

Answer 1

你的函数中缺少一行代码，用于使用 .toDataURL() 函数将 <canvas> 转换为数据。

function convertCanvasToImage( thecanvas ) {
    var canvasData = thecanvas.toDataURL( 'image/png' ), //add this
        ajax = new XMLHttpRequest();
    ajax.open( 'POST', 'testSave.php', false );
    ajax.setRequestHeader( 'Content-Type', 'application/upload' );
    ajax.send( canvasData );
};

var thecanvas = document.getElementById( 'canvasId' );
convertCanvasToImage( thecanvas );

- ThinkingStiff

---

@themis 我更新了一下，让它更清晰。它是一个DOM画布对象。 - ThinkingStiff