如何使用 AJAX 成功將 HTML5 Canvas 圖像儲存到伺服器？

將HTML5 Canvas 儲存為伺服器上的圖像

在為使用者儲存生成藝術的過程中，您遇到了保存方面的挑戰圖像從畫佈到伺服器。本文解決了您的具體問題並提供了解決方案。

在先前教學所奠定的基礎上，您嘗試使用 XMLHttpRequest 物件儲存畫布資料。建立圖像檔案時，它仍然是空的且無法讀取。

深入研究內容類型

解開這個謎團的關鍵在於 Content-Type 標頭您在 AJAX 請求期間設定。最初設定為“application/upload”，此標頭似乎合乎邏輯，但並未得到 Web 伺服器的廣泛支援。

解決方案：擁抱Application/x-www-form-urlencoded

解決方案是將Content-Type 標頭改為「application/x-www-form -urlencoded」。此變更符合向伺服器提交表單資料的公認標準，使您的畫布資料能夠成功傳輸。

程式碼修改

要實作此解決方案，請修改您的AJAX 要求如下：

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

已驗證結果

已驗證結果

合併此修改後，您確認現在正在以非零大小建立影像檔案。然而，它們仍然無法作為有效圖像讀取和查看。

進一步探索這給您留下了一個揮之不去的謎題需要解決。在傳輸畫布資料時，影像資料的編碼或格式可能存在差異。需要進一步調查以確定問題的確切性質並制定永久解決方案。

以上是如何使用 AJAX 成功將 HTML5 Canvas 圖像儲存到伺服器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！