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

Question

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

然后我有一個不同的頁面，它有一個img元素來從數據庫請求數據並呈現它。 但它......不會。 數據通過，我可以通過瀏覽器的視圖源函數看到它：

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

（省略號添加）

它沒有被截斷或類似的任何愚蠢，我在每個腳本中都有document.write和echo，從畫布生成數據到嵌入最終元素的位置，它完全通過。

我已嘗試使用其他來源生成的圖像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

這適用於空白畫布，因為它由沒有任何符號的字母組成。 繪制后，canvas base64值會在其中包含+等字符，在POST語言中表示空格。 因此，如果您對您的值進行encodeURIComponent ，則這些符號將完整地發送到您的服務器，並且接收器應該能夠正確地呈現輸出。