画像ファイルのアップロードと保存範囲のトリミング（twitterみたいに）

Twitterのプロフィール画像の変更のように、ユーザが自分の写真やトップアイコンをアップロードして、そのタイミングでweb上でトリミング(保存範囲指定)できる機能がやってみたくていろいろと調べてたら以外に簡単にみたいなのでメモ

■使うライブラリ
・jQuery File Upload
・Jcrop

blueimp.github.io
Jcrop - Deep Liquid

■サーバ側
php Laravel5

■シーケンス

■方法

	$(function () {
		var url = '/xxx/post';
		$('#fileupload').fileupload({
			url: url,
			dataType: 'json',
			maxFileSize: 5000000,
			done: function (e, data)
			{
				$.each(data.result.files, function (index, file) {

					/*画像のUPが成功したら呼ばれる*/
					/*以下は適当に*/
					var span = document.createElement('span');
					span.innerHTML = ['<div class="frame_img"><img src="', file, '" id="select_target" /></div>'].join('');
					//前回の追加エレメント削除
					var element = document.getElementById("files");
					while (element.firstChild) {
						element.removeChild(element.firstChild);
					}
					document.getElementById('files').insertBefore(span, null);
					$('#file_name').val(file);
				});
				//選択枠をロード
				loadjcrop();
			}
		}).prop('disabled', !$.support.fileInput)
			.parent().addClass($.support.fileInput ? undefined : 'disabled');
	});

	/*
	トリミング jcropの初期設定
	*/
	function loadjcrop(){
		var img = $('#select_target');

		$(img).Jcrop({
		  aspectRatio: 1,
		  onSelect: updateCoords,		/*コールバック*/
		  setSelect: [0, 0, 200, 200],		/*初期設定のトリミング枠*/
		  minSize: [200, 200],			/*トリミング枠の最小サイズ*/
		  allowResize: true,
		  allowSelect: false,
		  boxWidth: 500,
		  bgColor: 'white',
		});
	}

	/*
	トリミング枠を変更するたびにこれがコールバックされる
	formの隠しパラメータを上書きする
	*/
	function updateCoords(c)
	{
		$('#user_img_x').val(c.x);
		$('#user_img_y').val(c.y);
		$('#user_img_w').val(c.w);
		$('#user_img_h').val(c.h);
	}

</script>

javascript側でやることは
1,画像ファイルを非同期でサーバにアップ
2,アップ後ブラウザに表示、jcropをでトリミング枠を作成
3,トリミング枠を変更するたびにformのパラメータを随時更新
開始点(x,y) 幅高を更新する

■html側
かなり端折ってますがこんな感じ。

<span class="btn btn-default fileinput-button">
    <span>画像選択</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple >
</span>


<!-- form -->
<form action='/setting/user/user_img/post' method="post">
	<input type="submit" class="btn btn-default" value='変更'/>
	<input type="hidden" name="user_img_x" value="" id='user_img_x'>
	<input type="hidden" name="user_img_y" value="" id='user_img_y'>
	<input type="hidden" name="user_img_w" value="" id='user_img_w'>
	<input type="hidden" name="user_img_h" value="" id='user_img_h'>
	<input type="hidden" name="img_url" value="" id='file_name'>
</form>

見た目はこんな感じになります。
右側が動的に画像をロードしてトリミング枠を編集します。

■サーバ側
省きますがformのパラメータを参考にサーバ側で一時保存の画像を編集します。