HTML5畫布不會呈現從canvas.toDataURI接收的數據（）

Question

我有一個HTML5畫布。我使用.toDataURI並使用AJAX將其發送給PHP。 PHP將它存儲在數據庫中。

然後我有一個不同的頁面，它有一個img元素來從數據庫請求數據並呈現它。但它......不會。數據的逐步完成，我可以用瀏覽器的查看源代碼功能看它：

<img id="embedded" src="data:image/png;base64,iVBORw...5CYII=" /> 

（省略號加）

它沒有被截斷或任何愚蠢的事這樣的，我有文件撰寫的和回聲的每腳本從畫布生成數據的位置嵌入到最終元素的位置，並且它完全完好無損。

我試過用其他來源生成的圖像URI，沒有問題。我已經在Chrome 12和Firefox 5中測試過了，兩者的行爲都是相同的。

最後一個奇怪的是，當畫布完全空白時，它生成的圖像數據顯示出來：我得到一個空白圖像，其尺寸與原始畫布相同。但只要我在上面畫什麼東西，什麼都沒有。只是熟悉的小錯誤加載圖像圖標。

這是我對接收端代碼：

http://pastebin.com/Hw1ykd1i

而對於發送端：

http://pastebin.com/hwsEfsaD

Answer 1

如果我完全理解你的問題 - 你說接收器不工作（即反映輸出的東西）。

您需要編碼數據：

function postToServer(data) { 
    data = "data=" + encodeURIComponent(data); 
    // continue with XHR POST 

這工作與空白的畫布，因爲它是由字母，沒有任何符號。只要您繪製，畫布base64值就會包含+等字符，其中POST語言表示空格。因此，如果你的價值是encodeURIComponent，那麼這些符號將會完整地發送到你的服務器，而接收者應該能夠正確地呈現輸出。