canbeeの日記

web上でお絵かき＋画像をサーバに保存するアプリをつくった

web

webブラウザ上でお絵かき＋画像を保存＋URLをはたくと他の人にも画像を見せられる
というアプリをつくった。
web-painter

HTML5/jQuery（お絵かき部分）+PHP（保存・表示部分）+MySQL（データためとく）です。

○お絵かき部分
DrawBoxを使わせていただきました。
ファイルを設置してcanvas要素を入れるだけでお絵かきできる。楽だー。

○保存・表示部分
canvasの中身をURLエンコードして（これはjavascript）それをPHPのほうに
POSTしてます。
↓渡してるjavascript

function submitImg(){
  var PNG = drawbox.toDataURL('image/png').replace(/^.*,/, '');
  var form = document.createElement('form');
  document.body.appendChild(form);
  var input = document.createElement( 'input');
  input.setAttribute('type','hidden');
  input.setAttribute('name','img');
  input.setAttribute('value', PNG);
  form.appendChild( input );
  form.setAttribute('action','saveImg.php');
  form.setAttribute('method','post');
  form.submit();
}

エンコードすると絵がすごい長い文字列になるので、それを受け取って
MySQLに保存。
（データ型はTEXTだと足りなかったっぽいのでMEDIUMTEXT型にした）

保存した文字列を

<img src="data:image/jpeg;base64,保存した文字列" alt="image" width="150" height="150">

みたいな感じで見せるとちゃんと画像が表示される。

あと、保存しとくときに一意の文字列を生成して、それを別のフィールドに同時に保存。
画像を表示するときはその一意の文字列からテーブル内を検索して、画像を表す文字列をひっぱってくるようにしてる。

公開したら、さっそく改善案をいただいたので
これからもっといい感じになるようにかえていきます。

○参考にさせていただいたページ
・canvasに描いた絵（画像）をサーバに保存
・Canvasによる画像ファイル（img要素）の読み書き
ありがとうございました！

Permalink | コメント(0) | トラックバック(0) | 15:54