將HTML5畫布數據保存到服務器

我知道有很多關於此問題的問題，但目前我正試圖將用戶創建的HTML5畫布數據保存到我的Web服務器上的特定文件夾。將HTML5畫布數據保存到服務器

我已經能夠使用以下，將圖像保存到服務器：

function sendData(postData){ 
var ajax = new XMLHttpRequest(); 
ajax.open("POST",'saveFrame.php',true); 
ajax.setRequestHeader('Content-Type', 'canvas/upload'); 

var comicID = document.getElementById('comicID').value; 

ajax.onreadystatechange=function() 
{ 
    if (ajax.readyState == 4) 
    { 
     alert("Frame saved"); 
    } 
} 
ajax.send(postData); 
}

saveFrame.PHP文件

<?php 

if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) 
{ 
    // Get the data like you would with traditional post 
    $rawImage=$GLOBALS['HTTP_RAW_POST_DATA']; 

    // Remove the headers 
    $removeHeaders=substr($rawImage, strpos($rawImage, ",")+1); 

    // decode it from base 64 and into image data only 
    $decode=base64_decode($removeHeaders); 

    // save to your server 
    $saveName = "test.jpeg"; 
    $fopen = fopen($saveName, 'wb'); 
    fwrite($fopen, $decode); 
    fclose($fopen); 
} 
?>

我希望能夠做的就是一起傳遞一些變量什麼這樣我就可以在saveFrame.php文件中使用PHP動態查找我的數據庫，以確定它應該保存爲什麼文件名。我不確定如何做到這一點，因爲我不習慣使用AJAX。

任何建議表示讚賞，

亞歷

來源

2012-01-23 Alex Macdonald

您是否可以保存畫布並將其成功渲染回來？ – Mutant

可以使用HTML5 canvaspixelarray屬性來獲取畫布的數據。

來源

2012-02-02 08:10:02

將HTML5畫布數據保存到服務器

回答

相關問題