JavaScript でドラッグ＆ドロップで画像を切抜くことができる jsCropperUI

自作しようと思っていましたが、既に作って公開してくれている人がいました。ファイルは下記からダウンロードできます。サンプルが色々入っていますので、要点を抑えて説明させて頂きます。

• DEfusion.org.uk » JavaScript Image Cropper UI, using Prototype & script.aculo.us
• DEfusion.org.uk » Demo » Prototype JavaScript Image Cropper UI

jsCropperUI の特徴

• 範囲を指定することができる
• 指定した範囲外を再度指定することができる
• 一度指定した範囲を後から変更することができる
• Shift キーを押しながら指定で縦横1:1で範囲指定可能
• 縦横を固定した範囲指定も可能

tests フォルダに色々とサンプルが入っています。基本的には example-Basic.htm を参考に真似て行けば良いのです。ちなみに example-Dimensions.htm などでは固定範囲で指定するサンプルだったり、example-FixedRatio.htm はデフォルトで範囲を指定するサンプルと、色んなものがありますので一度全て目を通しておくと便利です。