CANVAS版イメージトリマー

任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。
処理の流れとしては、

  1. 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。
  2. CANVASに読み込んだ画像の上にjQueryUIのドラッグ&ドロップボックス(divレイヤー)を重ねる。
  3. トリミングボタンが押されたらドラッグ&ドロップボックス(divレイヤー)のX,Y座標と縦横幅を取得します。
  4. 取得した座標と幅を元画像の実寸比に計算し直して、トリミング&最終出力サイズにリサイズします。
  5. 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。
  6. PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。

HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。

画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです(なので、ツール自体の見た目ものっぺりしています)。

利用コード:HTML5、JavaScript、jQuery、PHP

イメージトリマー

任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。
処理の流れとしては、

  1. 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。
  2. CANVASに読み込んだ画像の上にjQueryUIのドラッグ&ドロップボックス(divレイヤー)を重ねる。
  3. トリミングボタンが押されたらドラッグ&ドロップボックス(divレイヤー)のX,Y座標と縦横幅を取得します。
  4. 取得した座標と幅を元画像の実寸比に計算し直して、トリミング&最終出力サイズにリサイズします。
  5. 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。
  6. PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。

HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。

画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです(なので、ツール自体の見た目ものっぺりしています)。

利用コード:HTML5、JavaScript、jQuery、PHP

イメージトリマー