ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5のAPIは強力で、これまでローカルでしかできなかったような操作がWebブラウザ上で、しかもクライアントだけで実現できるようになっています。特にCanvasの表現力はとても高く、画像加工などで活躍します。

アップロード予定ファイルの画像サムネイルを表示したり、縮小したりする使い方がありますが、今回はさらに画像加工に特化したphotoeditor2を紹介します。

photoeditor2の使い方

photoeditor2を試してみます。画像ファイルを指定するとWeb上に表示されます。
photoeditor2を試してみます。画像ファイルを指定するとWeb上に表示されます。

画像編集メニューです。
画像編集メニューです。

エフェクト。今のところモノクロが用意されます。
エフェクト。今のところモノクロが用意されます。

トリミング。範囲を指定します。
トリミング。範囲を指定します。

こんな感じに切り抜けます。
こんな感じに切り抜けます。

photoeditor2がサポートしているのは画像のリサイズ、トリミング、モノクロへの変換です。機能はCanvasを使ったものになりますので、他にもパラメータを追加していけば画像加工の幅が広がることでしょう。

そのまま使うのはもちろん、Canvasタグを使った画像加工のやり方について学ぶのにもちょうど良さそうなソフトウェアです。

photoeditor2はHTML5/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

s-hiroshi/photoeditor2

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2