如何使用php和ajax保存画布图像数据？

Question

我在vps上遵循了本教程： http : //permadi.com/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

testSave.php

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
  // Get the data
  $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

  // Remove the headers (data:,) part.
  // A real application should use them according to needs such as to check image type
  $filteredData=substr($imageData, strpos($imageData, ",")+1);

  // Need to decode before saving since the data we received is already base64 encoded
  $unencodedData=base64_decode($filteredData);

  //echo "unencodedData".$unencodedData;
 $randnum = rand(1111111111,9999999999);
  // Save file. This example uses a hard coded filename for testing,
  // but a real application can specify filename in POST variable
$tmpfname = tempnam("http://123.xx.xx.xx/test/tmp/", "FOO");
$fp = fopen(http://123.xx.xx.xx/test/test . uniqid() .".png","wb");
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
?>

JS

function saveViaAJAX()
{
    var testCanvas = document.getElementById("testCanvas");
    var canvasData = testCanvas.toDataURL("image/png");
    var postData = "canvasData="+canvasData;
    var debugConsole= document.getElementById("debugConsole");
    debugConsole.value=canvasData;

    //alert("canvasData ="+canvasData );
    var ajax = new XMLHttpRequest();
    ajax.open("POST",'testSave.php',true);
    ajax.setRequestHeader('Content-Type', 'canvas/upload');
    //ajax.setRequestHeader('Content-TypeLength', postData.length);


    ajax.onreadystatechange=function()
    {
        if (ajax.readyState == 4)
        {
            //alert(ajax.responseText);
            // Write out the filename.
                document.getElementById("debugFilenameConsole").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a><br>Reload this page to generate new image or click the filename to open the image file.";
        }
    }

    ajax.send(postData);
}

问题在于，当用户单击“通过ajax发送”时，服务器目录（ http://prntscr.com/8bhmxa ）中没有发送/生成的图像。 结果如下： http : //prntscr.com/8bhi62 ，目录中的所有内容均保持不变。

应该发生的是在“另存为”下生成图像的链接

有什么办法吗？

PS是否有反响与PHP图像链接？

Answer 1

问题出在您的AJAX。 在此处参考Url，给出了使用php和ajax保存画布的代码。 链接