画像の加工にTUI Image Editorを使ってみた。
TUI Image Editorとは
まずは、UI Image Editorとはどういうものかについて
TOAST UIというライブラリがあります。
元々はブログなどの入力エリアを構築するリッチエディタのライブラリになっていて
jQuery, Vue, Reactでラップされたものが提供されています。
エディターの機能を追加するプラグインもいくつか用意されています。
メンテナンスは結構頻繁にされているようで、スター数も多く、多くの人に使われているライブラリになります。
TOAST UI Image Editorというのは、このTOAST UIの画像に焦点を当てたエディターになります。
こちらも多くの人に使われていてスター数も現在（2021/07）で4k以上あります。
こちらもjQuery, Vue, Reactでのラップが提供されています。
入力や画像エディターの他にもこちらの種類のエディターの提供もあります。
TOAST UI Grid
TOAST UI Chart
TOAST UI Calendar
TOAST UI Components
自分はVue Wrapのものを使いましたが、執筆現在ではVue v3には対応していないようです。
機能
・Crop(切り抜き)
・Flip(反転)
・Rotation(回転)
・Drawing(お絵かき)
・Shape(図形の挿入)
・Icon(アイコンの挿入)
・Text(テキストの挿入)
・Mask(画像の被せ)
・Filter(効果)
レイアウト
このライブラリでは、UIも提供しています。
元々のUIの中に画像を読み込んで、加工を行う事ができます。
逆に、UIなしでAPIを利用する事で自由なレイアウトにする事も可能です。
公式の使い方に関してはこちらが参考になるかと思います。
使い方
const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
includeUI: {
loadImage: {
path: 'img/sampleImage.jpg',
name: 'SampleImage',
},
locale: locale_ru_RU,
theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom',
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70,
},
});
これで#tui-image-editorの要素に対してイメージエディターを作成する事ができます。
デフォルトのエディターを使いたい場合
includeUI こちらのプロパティを追加すると以下のようなエディターが自動で生成されます。
しかし、これだとレイアウトのカスタムがやり辛いので、画像だけを表示させて、好きなようなボタンを作り操作したいといった時はincludeUIを追加しないでおくとインスタンスだけが生成されます。
ロードのタイミングで以下のようにFileクラスの画像を渡すことで画像を表示することができます。
instance.loadImageFromFile(file)
あとは、好きなボタンを配置し、イベントをバインドしAPIを使うことで画像に対して効果を与えることができます。
API
APIに関しては、こちらを参考にすると分かりやすいです。
インスタンスに対してどのような効果を与えるかは、それぞれmethodが用意されている感じですが
公式の方のドキュメントが古かったりで、最新のデモにはあるけど実際のサンプルコードにはなかったりといったこともあるので、少しライブラリの中身を見るなりブラウザで読み込んでいるJSファイルをヒントに探すしかないような気がします。
こちらのissueに書かせてもらいましたが、TSのd.tsファイルが用意されているのですが
applyFilter()メソッドに用意されているオブジェクトプロパティとして一つしか指定がなく、それ以外のフィルター効果を与えようと思うとd.tsファイルをいじるか、ts-ignoreしてコンパイル対象外にしないとダメのようです。
今回のissueで対応が入るか、別の方法があるかの提示があればまた追記したいと思います。
参考
公式ドキュメント
Github(Vue wrap)
Discussion