○概要2013-05-06

• WWWブラウザでお絵かきをしてその画像をWebサーバへ投稿します。

○ソフトウェア

• Websanova wPaint 1.13.1 JavaScript(jQuery)で書かれたシンプルなお絵かきソフトです。
• PHP 5.3.24 （画像処理に GD を使用）

○手順

1. JavaScriptで画像データを送信する
   

   $("input#btn_submit").click(function() {
   	//wPaint から画像データを取得
   	var imageData = $("div#wPaint").wPaint("image");
   	//非表示フィールドに画像データを設定
   	$("input[name=image]").val(imageData);
   	//フォーム送信
   	this.form.submit();
   });
   

   
   ※ wPaint に添付される index.html には jQuery の ajax() で非同期に送信する例が書いてあります。
    
   
2. PHPで画像データを受け取る
   

   if ($_POST['image']) {
   	//画像取得
   	$image = preg_replace('/^data:image\/png;base64,/', '', $_POST['image']);
   	$im = imagecreatefromstring(base64_decode($image));
   
   	//画像ファイル出力
   	imagePng($im, "post_stamped.png");
   }
   

    
   ※ wPaint に添付される upload.php には imagecreatefrompng() で取り込む例が書いてあります。

○雑感

• 半年ぶりに wPaint を見てみましたが、アイコンのツールチップがカスタマイズ（日本語化）できるようになっていたり、画像データを Ajax で送信しPHPとの連携するサンプルが付いていたり、ずいぶん使い易くなっていました。2013-05-06

○お絵かき JavaScript(jQuery)

wPaint ダウンロードページ

○このサンプル

postpaint.zip