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

画像を編集するにあたってHTML5標準のCanvasを拡張するFabric.jsというすごいJavascriptライブラリを使用しています。
画面のUIにはDHTMLXというすごいJavaScriptライブラリを使用しています。PhotoshopのようなUIを目指してますが難しいです。

まだ作成中で頓挫する可能性もありそう、、ということでScreenToGifというデスクトップをキャプチャしてGifアニメを作成するツールで使用中の様子を撮ってみました。

紹介用に作成した動画内で保存した画像2点になります。


「ファイル>新規作成」からPCに保存されてる画像を開きます。
「イメージ」「フィルタ」はそれぞれCanvas上に展開した画像に対して色調の変更やカラーフィルタを設定することができます。Fabric.jsに標準で搭載されてるフィルタを呼び出しているだけです(^^;
「ファイル>保存」で選択中のオブジェクトを画像として保存することができます。

今回作成してる画像エディタのソースについて、ページロード後にすべてDHTMLXで動的に生成することを目標にしてたので以下のようにすっきりしています。

<!DOCTYPE html>
<html>
<head>
  <title>画像エディタ</title>
  <link rel="stylesheet" type="text/css" href="./dhtmlx/fonts/font_roboto/roboto.css"/>
  <link rel="stylesheet" type="text/css" href="./dhtmlx/dhtmlx.css"/>
  <link rel="stylesheet" type="text/css" href="./css/style.css"/>
  <script src="./dhtmlx/dhtmlx.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="./js/fabric.min.js"></script>
</head>
<body>
<script src="./js/script.js"></script>
</body>
</html>

以下は課題、メモ

  • クリッピング機能を追加
  • 回転/反転機能を追加
  • HTML5のローカルストレージに一時保存したりする機能を追加
  • HTML5のローカルストレージに保存した画像をロードしたりする機能を追加
  • その他のFabric.jsで使用可能なフィルタ機能を追加
  • Chromeだと背景に表示してるグリッドで重くなってるっぽい件
  • 設定からツールの設定を変更できるようにする。設定はCookieで管理する?
タイトルとURLをコピーしました