HTML5のCanvasで画像を加工するツールを作成する2

前回の続きです。
出来上がってる機能だけをまとめ上げたものを公開してみました。

画像エディタ

注意点としてIE11やEdgeだと画像が読み込めません。デバッグもツールがうまく動いていないのかよくわからない状態です(^q^
FireFoxとChromeではおおよそ使えるようになっています。
以前問題点に挙げてた背景に表示するグリッドが重い件はグループ化することで軽くなりました。

「ヘルプ>使い方」からおおよその使い方を見ることができます。

「設定」からグリッドの表示可否や表示間隔を設定することが可能となっています。設定値はCookieに保存しています。デフォルトは20ピクセル間隔になっています。
動作が重い場合はグリッドを非表示にすることで改善されるかも。

以下は課題、メモ

  • クリッピング機能を追加
  • 数値指定の回転/反転機能を追加
  • HTML5のローカルストレージに一時保存したりする機能を追加
  • HTML5のローカルストレージに保存した画像をロードしたりする機能を追加
  • その他のFabric.jsで使用可能なフィルタ機能を追加
  • Chromeだと背景に表示してるグリッドで重くなってるっぽい件
  • 設定からツールの設定を変更できるようにする。設定はCookieで管理する?
    • Cookieで管理、保存時の画像形式、グリッドの表示可否など設定可
  • RGB調整などのフォームにテキストボックスいらない気がしてきた
  • 外部の画像URLから開く機能を追加
  • ブラウザにドラッグ&ドロップで開く機能を追加
タイトルとURLをコピーしました