写真をWebサイトにアップロードしたり、SNSで共有したりする機会が増えてきた昨今、写真を手軽に加工できる機能があると便利ですよね。でも、いちからCanvasを使って開発するのは大変そう...。そんな時におすすめなのが、JavaScriptライブラリの「Filerobot Image Editor」です。
Filerobot Image Editorを使えば、プログラミングの知識が少ない初心者でも、簡単に写真編集機能を組み込むことができます。この記事では、Filerobot Image Editorの機能や使い方を、初心者向けに詳しく解説します。
Filerobot Image Editorでできること
まずは、Filerobot Image Editorでどんなことができるのか見ていきましょう。主な機能は以下の通りです。
- 切り抜き(トリミング)
- 回転
- 左右・上下反転
- 輝度・コントラスト・彩度の調整
- ぼかし・色温度の変更
- 各種フィルタリング
- ウォーターマークの追加
- テキスト・図形・矢印の追加
- リサイズ(解像度の変更)
これだけの機能があれば、写真を手軽に加工することができそうですね。
Filerobot Image Editorのインストールとセットアップ
それでは、Filerobot Image Editorを実際に使ってみましょう。まずはインストールから行います。
npm install @scaleflex/filerobot-image-editor
CDNの場合は以下のように読み込みます。
<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>
Reactを使っている場合は、専用のReactコンポーネントも用意されています。以下のコマンドでインストールできます。
npm install react-filerobot-image-editor
Filerobot Image Editorの使い方
HTML側の準備
まず、HTML側でFilerobot Image Editorを表示する場所を用意します。今回は、id="editor_container"というdiv要素を用意しました。
<div id="editor_container"></div>
JavaScript側の準備
次に、JavaScript側でFilerobot Image Editorの設定を行います。ここでは、各機能の設定や、保存時の処理などを記述します。
const { TABS, TOOLS } = FilerobotImageEditor;
const config = {
source: "https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg", // 対象の画像
// 保存処理（今回はダウンロード）
onSave: async (editedImageObject, designState) => {
const blob = await toBlob(data.imageCanvas);
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
document.body.appendChild(a);
a.download = data.fullName;
a.href = url;
a.click();
a.remove();
setTimeout(() => {
URL.revokeObjectURL(url);
}, 1000);
},
// アノテーションの設定
annotationsCommon: {
fill: "#ff0000",
},
// デフォルトのテキスト
Text: { text: "Filerobot..." },
// 回転に関する設定
Rotate: { angle: 90, componentType: "slider" },
// トランザクション設定
translations: {
profile: "Profile",
coverPhoto: "Cover photo",
facebook: "Facebook",
socialMedia: "Social Media",
fbProfileSize: "180x180px",
fbCoverPhotoSize: "820x312px",
},
// 切り抜きに関する設定
Crop: {
presetsItems: [
{
titleKey: "classicTv",
descriptionKey: "4:3",
ratio: 4 / 3,
},
{
titleKey: "cinemascope",
descriptionKey: "21:9",
ratio: 21 / 9,
},
],
presetsFolders: [
{
titleKey: "socialMedia",
groups: [
{
titleKey: "facebook",
items: [
{
titleKey: "profile",
width: 180,
height: 180,
descriptionKey: "fbProfileSize",
},
{
titleKey: "coverPhoto",
width: 820,
height: 312,
descriptionKey: "fbCoverPhotoSize",
},
],
},
],
},
],
},
tabsIds: [TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK],
defaultTabId: TABS.ANNOTATE,
defaultToolId: TOOLS.TEXT,
};
ここでは、onSaveで保存時の処理を記述しています。今回は、編集後の画像をダウンロードするようにしています。
また、Cropでは、切り抜きのプリセットを設定しています。translationsでは、各言語の翻訳を設定できます。
Filerobot Image Editorの表示
設定が完了したら、以下のコードでFilerobot Image Editorを表示します。
const filerobotImageEditor = new FilerobotImageEditor(
document.querySelector("#editor_container"),
config,
);
filerobotImageEditor.render({
onClose: (closingReason) => {
console.log("Closing reason", closingReason);
filerobotImageEditor.terminate();
},
})
onCloseでは、Filerobot Image Editorが閉じられた時の処理を記述します。
これで、Filerobot Image Editorが表示されます。
なお、 toBlob 関数はCanvasのデータをBlobに変換するasync/await関数です。
const toBlob = (blob) => {
return new Promise((res) => {
blob.toBlob(res);
})
}
Monacaで使う場合の注意点
Monacaの場合、保存処理はファイル操作 プラグイン | Monaca Docsを利用して保存します。またはクラウドへのアップロードが良いでしょう。
編集後のデータは、CanvasオブジェクトとBase64形式の文字列で取得できます。
また、Filerobot Image Editorはレスポンシブデザインに対応しているので、スマートフォンでも使いやすいです。ただし、iOS端末ではテキストの入力ができない場合があるので注意が必要です。
まとめ
Filerobot Image Editorでは必要な機能だけを組み込めるので、ユーザーのアップロードする写真をリサイズして小さくしたり、正方形に加工するなどに利用できそうです。もちろんInstagram的なフィルターも便利です。
写真を利用するアプリを作る際に導入を検討してください。