Libralyは画像ジェネレータ系のサービスで、画像のアップロード前にトリミング加工する機能を組み込みやすい形にパッケージ化したライブラリです。画像のトリミング加工はJavascriptを使ってWebブラウザ側で行うので、サーバー側に特別な機能は不要です。スマートフォンのタッチパネル操作にも対応しています。画像のアップロードボタン(ドラッグ&ドロップ可能)は、指定したエリアに自動生成されます。画像がアップロードされたら、自動的にトリミング画面が開きますトリミング画像の縦横比は、ターゲットに指定したDOM要素(IMGかCANVAS)の縦横比で固定されます。四隅の■をドラッグ、またはタッチパネルを指2本で開く操作をすると選択領域を拡大、縮小できます。切り抜きボタン、または選択領域をダブルクリック(ダブルタップ)でトリミングが出来ます閉じるボタン、または選択領域外をダブルクリック(ダブルタップ)でトリミング画面を閉じますトリミングした画像は、ターゲットに指定したDOM要素にコピーされます。ターゲット指定したDOM要素をクリックすると、再度トリミング画面が開きます。※トリミング先を直接ユーザーに見せたくない場合などでトリミング先をメソッドにしている場合、メソッドで任意で呼び出せます。blockUIが必要です。jQuery1.7以上であれば動くと思いますが、検証はしていません。Libralyを読み込むには、lbtrim.cssとlbtrim.jsを読み込んでください。Libralyは、ページが読み込み終わった後にLb_Trimを生成してください。一画面に複数トリミング画像を使いたい場合は、使いたい画像分生成してください(複数生成可能)最低限指定する要素は、アップロードボタンを配置する要素のIDと、トリミング後の画像を配置する要素(IMGかCANVAS)のIDです。トリミングのサイズは、トリミング後の画像を配置する要素のサイズをそのまま読み込みます。ユーザーが画像ファイルをアップロードする領域を指定する。トリミング後の画像の切り出し先(IMG要素かCANVAS要素)を指定する。トリミングの縦横比はこの要素のサイズに固定される。画像B選択トリミングA(IMG)トリミングB(CANVAS)。