processing.jsを使用して画像をpngファイルに保存します

Question

processing.jsで作成された小さな描画アプリケーションがあります。私はPHPファイルを使用してサーバーにアプリケーションを使用して作成された画像を保存したい（これは問題なし）。 私はcanvas要素がそのコンテンツcanvas.toDataURL（）を取得するメソッドを持っていることを知っていますが、processing.jsと同じようにする方法はわかりません。

ヒント？

乾杯！

Answer 1

おそらく

var image = document.getElementsByTagName("canvas")[0].toDataURL(); 

Answer 2

ですから、processing.jsでsaveFrame（）を使用する場合。画像が新しいウィンドウで開き、データを傍受するのが難しいことが分かりました。 soultionは、javascriptのキャンバスからイメージを取得することです。

// this grabs the canvas and turns it into a base64 image  
var image = document.getElementsByTagName("canvas")[0].toDataURL(); 

// Log the data to the canvas to check it working 
console.log(image); 

// then you can place the image on your web page  
document.getElementById("theImage").src=image; 

次に、htmlは簡単です。追加するだけです

<img id="theImage"></img> 

イメージをサーバーにアップロードする場合は、jsのデータを使用することができます。

image 

スタイル表示を使用することもできます。キャンバスを表示せずにキャンバスにイメージをレンダリングさせます。透明なPNGもサポートされています。キャンバスはデフォルトで透明です。