Image Trimming UI Libraly

Image Trimming UI Libralyは画像ジェネレータ系のサービスで、画像のアップロード前にトリミング加工する機能を組み込みやすい形にパッケージ化したライブラリです。
画像のトリミング加工はJavascriptを使ってWebブラウザ側で行うので、サーバー側に特別な機能は不要です。
スマートフォンのタッチパネル操作にも対応しています。
画像のアップロードボタン(ドラッグ&ドロップ可能)は、指定したエリアに自動生成されます。
画像がアップロードされたら、自動的にトリミング画面が開きます
トリミング画像の縦横比は、ターゲットに指定したDOM要素(IMGかCANVAS)の縦横比で固定されます。
四隅の■をドラッグ、またはタッチパネルを指2本で開く操作をすると選択領域を拡大、縮小できます。
切り抜きボタン、または選択領域をダブルクリック(ダブルタップ)でトリミングが出来ます
閉じるボタン、または選択領域外をダブルクリック(ダブルタップ)でトリミング画面を閉じます
トリミングした画像は、ターゲットに指定したDOM要素にコピーされます。
ターゲット指定したDOM要素をクリックすると、再度トリミング画面が開きます。
※トリミング先を直接ユーザーに見せたくない場合などでトリミング先をメソッドにしている場合、メソッドで任意で呼び出せます。

セットアップ方法

Image Trimming UI Libralyは、jQueryとjQuery blockUIが必要です。jQuery1.7以上であれば動くと思いますが、検証はしていません。 Image Trimming UI Libralyを読み込むには、lbtrim.csslbtrim.jsを読み込んでください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<link rel="stylesheet" href="lbtrim/lbtrim.css" type="text/css">
<script  type="text/javascript" src="lbtrim/lbtrim.js"></script>
		

Image Trimming UI Libralyは、ページが読み込み終わった後にLb_Trimを生成してください。
一画面に複数トリミング画像を使いたい場合は、使いたい画像分生成してください(複数生成可能)
最低限指定する要素は、アップロードボタンを配置する要素のIDと、トリミング後の画像を配置する要素(IMGかCANVAS)のIDです。
トリミングのサイズは、トリミング後の画像を配置する要素のサイズをそのまま読み込みます。

$(function () {
   var trim_a = new Lb_Trim({
   	upload_id:"btn_a"
   	,trim_id:"trim_img"
   });
   

Lb_Trim コンストラクタオプション

オプション名 必須 内容 デフォルト値
upload_id ユーザーが画像ファイルをアップロードする領域を指定する。 -
trim_id トリミング後の画像の切り出し先(IMG要素かCANVAS要素)を指定する。トリミングの縦横比はこの要素のサイズに固定される。 -
title   切り取り画面のタイトルを指定する 範囲を指定して,切り取りボタンかダブルクリックで切り取ってください
upload_area_message   ファイルをアップロードするエリアのメッセージを指定する クリックしてファイルを選択するかここにドラッグ&ドロップしてください
cut_button_message   切り抜きボタンのメッセージを指定する 切り抜き
close_button_message   切り抜き画面を閉じるボタンのメッセージを指定する 閉じる
maximize_button_message   切り抜き領域の最大化ボタンのメッセージを指定する 最大化
onCutFinished   関数をセットすることで、トリミング後に実行する なし

Lb_Trim メソッド

メソッド名 引数 内容
openTrimWindow なし トリミング画面を再度開く(イメージ再アップロード無しに再トリミングできます)

デモ

画像A選択
画像B選択
トリミングA(IMG)
トリミングB(CANVAS)