手書き入力のプラグイン

はじめに

自作 Web サービスの、競技会採点システムの為に作ったプラグインです。審査員に手書きのコメントや署名を書かせたい場合もあるのではないかと思い作成しました。作成してみて、他の用途(コンタクトフォームなどに手書き入力を追加)にも使用できるのではないかと思い公開しました。

※注意 このプラグインは、function.php などにコードを書かなくてはなりません!

動作

仕様

  • キャンバスのショートコードを提供します。
  • キャンバスを保存する際の、フィルターフックを提供します。
  • マウスとタッチの両方に対応しています。
  • 管理画面と公開画面の両方に対応しています。公開画面のボタンやセレクトボックスの外観は、テーマの CSS に依存します。

使用方法

以下の様なショートコードで、キャンバスを表示させます。

echo do_shortcode('[freecanvas height=500]');
属性デフォルト説明
width700キャンバスの幅
height700キャンバスの高さ
nameキャンバスがロードされた日時の文字列 このキャンバスの一意の名前

以下の様なフィルターフックに、キャンバスの「Save(保存)」ボタンを押した時の処理を書きます。以下は、wp-content/uploads ディレクトリに PNG 画像ファイルを出力するコードです。

/* Filter hook */
add_filter( 'free_canvas_save', 'canvas_save', 10, 2 );
/* Function for outputs a PNG image file */
function canvas_save( $image_data, $name ) {
	$wp_uploads = wp_upload_dir();
	$relation_path_true = strpos( $wp_uploads['baseurl'], '../' );
	if ( $relation_path_true > 0 ) {
		$upload_dir = wp_normalize_path( realpath( $wp_uploads['basedir'] ) );
	} else {
		$upload_dir = wp_normalize_path( $wp_uploads['basedir'] );
	}
	$filename = $upload_dir . '/' . $name . '.png';
	$image = imagecreatefromstring( $image_data );
	imagepng( $image, $filename );
}
変数説明由来
$image_dataBase64 による PNG 画像データキャンバスの値
$nameこのキャンバスの一意の名前Free Canvas の値

この記事を書いた人