任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。
処理の流れとしては、
- 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。
- CANVASに読み込んだ画像の上にjQueryUIのドラッグ＆ドロップボックス（divレイヤー）を重ねる。
- トリミングボタンが押されたらドラッグ＆ドロップボックス（divレイヤー）のX,Y座標と縦横幅を取得します。
- 取得した座標と幅を元画像の実寸比に計算し直して、トリミング＆最終出力サイズにリサイズします。
- 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。
- PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。
HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。
画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです（なので、ツール自体の見た目ものっぺりしています）。
利用コード：HTML5、JavaScript、jQuery、PHP
任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。
処理の流れとしては、
- 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。
- CANVASに読み込んだ画像の上にjQueryUIのドラッグ＆ドロップボックス（divレイヤー）を重ねる。
- トリミングボタンが押されたらドラッグ＆ドロップボックス（divレイヤー）のX,Y座標と縦横幅を取得します。
- 取得した座標と幅を元画像の実寸比に計算し直して、トリミング＆最終出力サイズにリサイズします。
- 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。
- PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。
HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。
画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです（なので、ツール自体の見た目ものっぺりしています）。
利用コード：HTML5、JavaScript、jQuery、PHP
