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

HTML5

2019.03.162019.03.15

画像を編集するにあたって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>

以下は課題、メモ