データとしてのhtml5キャンバスをmysqlデータベースに保存

Question

これは可能ではないかもしれませんが、私の状況には理想的です。私はスライドプレゼンターとしてhtml5キャンバスを使用しています。これを使用してローカルマシンに描画して保存することができます。

私の目標は、代わりにこれをいくつかの異なる方法でデータベースに保存することです。私は起こるしたい何

：スライドとユーザーまで

キャンバス負荷がそれに描画することができます。保存されたデータは、データベースのセルに保存されます。ユーザーがスライドを見るためにログインし直すと、元のスライドが表示され、注釈が上に表示されます。

この方法を使用すると、一意の人物ごとに数千の画像を保存する必要がなくなり、元のスライドを消去せずに過去の注釈を消去することができます。ここで

アップロードのための私のコードです：

キャンバス：

var img = new Image(); 
img.src = 'pdf_images/pdf-save-0.png'; 
img.onload = function() { 
    oCtx.drawImage(img, 0, 0) 
} 

私は必要なもの：元のイメージを引っ張る

<input type="button" id="savepngbtn" value="Save Slide"> 

<!-- Main Canvas/Main Slide --> 
<div id="main"><canvas id="drop1" class="drop" style=" background-repeat:no-repeat;" width="680" height="510"></canvas></div> 

• セーブ機能/機能作成された行をデータとして保存するデータベース
• データをアップロードして以前作成したキャンバスに表示するコード。

これが可能かどうかはわかりませんが、人は本当に素敵で、人生の節約になるでしょうか？ありがとう！

Answer 1

キャンバスはデフォルトで透明なので、他の画像の上に簡単に配置して描画することができます。

canvas.toDataURL()を使用して、キャンバスのbase64でエンコードされたpngを取得します。これをデータベースに保存することができます。通常のポストリクエストを使用して、サーバーにデータを送信することができます。その後、dbからデータを取得し、それをImage要素のsrcとして設定し、canvas 2dコンテキストでdrawImageを使用してイメージをキャンバスに書き戻すことで、復元できます。

ユーザーが描画してデータベースに保存するすべてのストークを記録することもできます。ページをロードするときに、ストロークを再描画することができます。

Answer 2

署名を取得することを目的としていますが、Thomas J BradleyのSignature Padプロジェクトでは、キャプチャされた図面を保存して再生するための有用な情報とコードサンプルがあるはずです。