画像編集系のJavaScriptライブラリはいくつか存在しますが、その中でも非常にシンプルで扱いやすく、直感的な操作が人気の「DarkroomJS」をご紹介しようと思います！
任意の「imgタグ」を指定することで、専用の「画像編集ツールバー」が表示されるので、そのままWeb上で加工をすることが出来るようになります。
必要なファイルを揃えよう！
「DarkroomJS」は、Canvas APIを効率よく扱える「fabric.js」をベースに開発されていることを踏まえて、事前に必要なファイルは以下の3つになります。
- darkroom.css
- darkroom.js
- fabric.js
これらのファイルは、GitHubからダウンロードして使うか、公式サイトのリンクを利用すると簡単です。
【darkroom.css】 http://mattketmo.github.io/darkroomjs/build/darkroom.css 【darkroom.js】 http://mattketmo.github.io/darkroomjs/build/darkroom.js 【fabric.js】 http://mattketmo.github.io/darkroomjs/vendor/fabric.js
あとは、上記ファイルを読み込んだ「index.html」を作成すればOK！
<!-- index.html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<link rel="stylesheet" href="darkroom.css" />
</head>
<body>
<h1>DarkroomJSデモ</h1>
<img src="dog.jpg" id="target">
<script src="fabric.js"></script>
<script src="darkroom.js"></script>
<script src="app.js"></script>
</body>
</html>
今回は、サンプルとして「犬の画像(dog.jpg)」を表示するようにしています。
また、メイン処理のプログラムは、新たに「app.js」というファイルを作り、ここにJavaScriptプログラムを書いていこうと思います。
現時点で、「index.html」をブラウザで開くと、画像が1枚表示されているだけです。
このあと、「DarkroomJS」の処理を書くことで、表示されている画像を加工することができるようになります！
「DarkroomJS」の基本！
それでは、早速「DarkroomJS」を使って、プログラミングをしていきたいと思います！
と、言っても、実は驚くほど簡単なコードで実現できるのです。
「app.js」に以下のコードを書いて保存してみましょう！
// app.js
var dkrm = new Darkroom('#target');
「#target」は、先ほどHTMLに配置した「犬の画像」の「imgタグ」内にあるID属性のことです。
わずか1行のコードを追加するだけで、もう一度「index.html」を開くと「画像編集ツールバー」が表示されているのが分かります！
もうこれで、このまま画像を編集できる状態になっているのですが、このままだと強制的に画像編集モードになってしまいます。
そのため、何らかのアクションを行うことで、「編集モード」に切り替わるようにした方が良いでしょう。
例えば、画像をクリックしたら「編集モード」に移行するようなプログラミングだとこんな感じ！
// app.js
var target = document.getElementById('target');
target.addEventListener('click', function() {
var dkrm = new Darkroom('#target');
})
画像要素を取得して、「クリックイベント」内に先ほどの処理を書いているだけです。
これで、意図的に画像をクリックすることで、「編集モード」に移行するようになるので利便性は高まるでしょう。
画像の加工は「回転」や「トリミング」など、現時点ではシンプルな加工に限定されています。
ただし、編集機能がそれぞれ「プラグイン」というカタチでコード設計がされており、「回転」「トリミング」「セーブ」などがそれぞれ「プラグイン用のコード」として作られています。
そのため、後から必要な機能を自分でプログラミングして組み込みやすくなっているのも特徴の1つです。
また、編集後は「セーブ」ボタンをクリックすることで、そのまま画像を置き換えることも出来ます。
ただし、元の画像が変更されているわけではないので、ブラウザを更新すると当然ながら元に戻ります。
編集後の画像を完全に置き換えたり、他の用途に何か使いたいような場合には、「callback処理」を書くことで実現できるようになっています。
var dkrm = new Darkroom('#target', {
plugins: {
// セーブ機能についてのオプション設定
save: {
callback: function() {
// ここに処理を書く
}
}
}
});
先ほど述べたように、編集機能はそれぞれプラグインとして設計されているので、「plugins」の中にある「save」の項目に「callback処理」を書くことで、編集後の画像データを取得できるようになっています。
callback処理の中身はこんな感じ！
// app.js
callback: function() {
// 編集後の画像データを取得
var newImage = dkrm.canvas.toDataURL();
}
これで、変数「newImage」に画像データが入っているので、例えば「img.src = newImage」とかにすると編集後の画像を任意の場所へ表示するようなことも簡単にできるでしょう。
GitHubのページには、より詳しいカスタマイズ方法が書かれているので、ご興味ある方はぜひチェックしてみてください！