任意の画像を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
イメージトリマー
...