高機能画像エディターライブラリ「TOAST UI Image Editor」を導入してお手軽画像編集！

TOAST UI Image Editorとは

HTML5 Canvasを使用した、高機能でお手軽な画像エディターをユーザーに提供することができるライブラリです。
スタンプや、文字入れをはじめ、白抜きやピクセレート、反転などの機能があります。

https://ui.toast.com/tui-image-editor/
https://github.com/nhn/tui.image-editor

導入

npm: npm install --save tui-image-editor
yarn: yarn add tui-image-editor

使い方

const ImageEditor = require('tui-image-editor')
で、モジュールを読み込み
new ImageEditor(document.querySelector('#tui-image-editor'), option)
とすることで
id="tui-image-editor"であるノードへ、エディター画面が子要素として挿入されます。

ポイントは、アイコン・CSSを別途インポートする必要があることと、
includeUI.loadImage.pathに編集対象画像のURLを与える必要があることです。
FileオブジェクトからURLを取得する方法は、
【Blob・File・Base64・データURL・FileReader】 それぞれの特徴とブラウザへの表示について
を参考にしてください！

// CSSのインポート
import 'tui-image-editor/dist/tui-image-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
// アイコンデータのインポート
import icon_a from 'tui-image-editor/dist/svg/icon-a.svg';
import icon_b from 'tui-image-editor/dist/svg/icon-b.svg';
import icon_c from 'tui-image-editor/dist/svg/icon-c.svg';
import icon_d from 'tui-image-editor/dist/svg/icon-d.svg';

const ImageEditor = require('tui-image-editor')
const locale_ja = {
  'Load': 'ファイル選択',
  'Download': 'ダウンロード'
  // etc...
}
const theme = {
  // メインアイコン
  'menu.normalIcon.path': icon_d,
  'menu.activeIcon.path': icon_b,
  'menu.disabledIcon.path': icon_a,
  'menu.hoverIcon.path': icon_c,
  // サブメニューアイコン
  'submenu.normalIcon.path': icon_d,
  'submenu.activeIcon.path': icon_c,
}
const imageEditor = new ImageEditor(document.querySelector('#tui-image-editor'), {
  includeUI: {
    loadImage: {
      path: base64String, //編集対象画像のURL
      name: 'Sample'
    },
    locale: locale_ja,
    theme: theme,
    initMenu: 'filter',
    menuBarPosition: 'bottom'
  },
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  selectionStyle: {
    cornerSize: 20,
    rotatingPointOffset: 70
  }
})

注意

includeUI.loadImage.pathにサーバー上の画像パスを与えると、CORSポリシーにより弾かれ、正常に動作しません。
工夫して、サーバー上のファイルを直接取得させずにデータを渡す必要があります（ご存知でしたらお教えください・・・）

また、デフォルトのエディタには編集後画像をアップロードするボタンが存在せず、ダウンロードボタンしかありません。
replaceChildなどを使って、tui-image-editor-download-btnクラスのノードを自作のダウンロードボタンと置換するなどする必要があります。

また、編集後画像は上記例では、imageEditor.toDataURL()で、Base64文字列形式で取得することができます。