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要素)の読み書き
ありがとうございました!