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