HTML5キャンバスはcanvas.toDataURI（）から受け取ったデータをレンダリングしません。

Question

私はHTML5キャンバスを持っています。私は.toDataURIそれをPHPにAJAXで送ります。 PHPはそれをデータベースに保存します。

次に、データベースからデータを要求してレンダリングするimg要素を持つ別のページがあります。しかし、それは...できません。取得データのは、私は、ブラウザのソース表示機能でそれを見ることができます：

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

（省略記号が追加された）

それは切り捨てまたはそのような愚かなものであること、私はすべての中でのdocument.write年代とエコーのを持っていませんキャンバスによってデータが生成されて最終的な要素に埋め込まれる場所からのスクリプトであり、完全に元通りになっています。

他のソースから生成されたイメージURIで試してみましたが、問題はありません。私はChrome 12とFirefox 5でこれをテストしましたが、動作は両方で同じでした。

最終的には、キャンバスが完全に空白の場合、それが生成する画像データが表示されます。元のキャンバスと同じ大きさの空白の画像が表示されます。しかし、私はそれに何かを描くとすぐに、何も。ちょうどおなじみの小さなエラーローディングイメージアイコン。

これは、受信側のために私のコードです：私はあなたの問題を完全に理解している場合

http://pastebin.com/hwsEfsaD

Answer 1

- あなたが言っている：

http://pastebin.com/Hw1ykd1i

そして、送信側のためにレシーバは動作していません（つまり出力をミラーリングするもの）。

あなたのデータをエンコードする必要があります。それは任意の記号なしの文字で構成されているため

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

これは空白のキャンバスで動作します。描くとすぐに、キャンバスのbase64値には+などの文字が含まれています。POSTという言語ではスペースを意味します。あなたの値がencodeURIComponentなら、それらのシンボルはあなたのサーバにそのまま送信され、受信者は出力を正しくレンダリングできるはずです。