0

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

4

1 に答える 1

2

私があなたの問題を完全に理解していれば、あなたは受信機が機能していないと言っています (つまり、出力をミラーアウトするもの)。

データをエンコードする必要があります。

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

空白のキャンバスは記号を含まない文字で構成されているため、これは空白のキャンバスで機能します。描画するとすぐに、キャンバスの base64 値に のような文字が含まれます。+これは、POST言語でスペースを意味します。したがってencodeURIComponent、値を指定すると、これらのシンボルはそのままサーバーに送信され、レシーバーは出力を正しくレンダリングできるはずです。

于 2011-06-25T23:27:55.067 に答える