Filerobot Image Editor
Filerobot Image Editorは任意の画像にさまざまなフィルターを掛けたりリサイズ、クロップ、回転などの加工を施したうえでダウンロードできるようにする、画像加工ライブラリです。UIまで全て概ね完成されたもので、フレームワークの類ではありませんが、OSSとして公開されているのでカスタマイズできるようになっています。
フィルターやエフェクトを施してスマフォアプリでよくある画像加工アプリを実装できる、というもの。実機では試していませんが、スマフォでも問題なく動作するようです。
というわけで、試しに使ってみました。以下動作サンプルを用意しています。
動作サンプル
こんな感じのUIで画像を編集し、ダウンロードできるようになります。エフェクトやフィルターも付いてます。
単純に実装するだけならCDNの読み込みだけで済みます。
<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/2.1.0/filerobot-image-editor.min.js"></script>
初期化して編集したい画像を読み込みます。
const ImageEditor = new FilerobotImageEditor();
ImageEditor.open('https://picsum.photos/500/300');無論、アップロードした画像を編集する、といった事も可能です。また、開発ロードマップも公開されており、今後は更なるエフェクト等の追加や画像の明るさ、コントラストや露出、彩度など、画像編集アプリの基本ともいえる機能の追加、サイズ圧縮やプレビュー機能などの追加も予定しているそうです。
本ライブラリはMITライセンスとしてソースコードが公開されています。基本形は完成されているので拘りが無ければある程度カスタマイズするだけですぐに実装できそうですね。