使用ajax和php上傳canvas上下文作爲圖像

Question

我有一個畫布，我想使用ajax和php上傳canvas上下文到服務器。我希望最終輸出成爲存儲在服務器上的映像。我已經使用表單完成了圖片上傳。但現在我想讓canvas上下文將其轉換爲圖像並上傳到服務器！

那麼，我該怎麼做呢？任何建議，算法或解決方案，表示讚賞！

Answer 1

This blog post恰當地描述了使用AJAX查詢將畫布保存到服務器上的方法，我想這應該適合你。

基本上，您將需要一個var canvasData = testCanvas.toDataURL("image/png");檢索畫布的JavaScript內容。這將是一個Base64編碼的字符串，如下所示：data:image/png;base64,fooooooooooobaaaaaaaaaaar==。

下面的代碼將確保AJAX查詢將內容發送到HTML：

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

在服務器上，在PHP腳本，你將有一個在$GLOBALS陣列名爲HTTP_RAW_POST_DATA關鍵，這將包含我們剛纔提取的數據。

// Remove the headers (data:,) part. 
$filteredData=substr($GLOBALS['HTTP_RAW_POST_DATA'], strpos($GLOBALS['HTTP_RAW_POST_DATA'], ",")+1); 

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

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

當然，test.png是您要保存的文件名。第一行需要刪除編碼圖像的data:image/png;base64,部分，以便稍後可以通過base64_decode()進行解碼。它的輸出（$decodedData）將被保存到文件中。