JavaScriptで画像処理するなら「Jimp」が便利
2017-02-10
現在JavaScriptは、ブラウザで使用されるのはもちろんのこと、サーバーサイドでWebサーバーとして動作したり、はたまた開発者のPCで各種開発ツールとして動作したりしており、様々な場面で利用されています。
そこで今回は、そのどちらでも使える、Node.jsとブラウザJavaScriptの両方に対応した画像処理ライブラリ「Jimp」を紹介したいと思います。
「Jimp」とは
Jimpは、外部またはネイティブの依存関係が全くない、完全にJavaScriptで記述されたNode.js用の画像処理ライブラリです。ライセンスはMITライセンスで、オープンソースで開発されています。
以下のnpmコマンドでインストールできます。
npm install --save jimp例えば、以下のように使用することができます。
var Jimp = require("jimp");
// "lenna.png"を開く
Jimp.read("lenna.png", function (err, lenna) {
if (err) throw err;
lenna.resize(256, 256) // resize
.write("lena-small-bw.jpg"); // save
});
// Promiseを利用することもできる
Jimp.read("lenna.png").then(function (lenna) {
lenna.resize(256, 256) // resize
.write("lena-small-bw.jpg"); // save
}).catch(function (err) {
console.error(err);
});基本的な使用方法
Jimp.readメソッドは、PNG/JPEG/BMPファイルへのパスからimageオブジェクトを取得します。
imageオブジェクトは、第二引数のコールバック関数か、返り値のPromiseオブジェクトから受け取ることができます。
Jimp.read("./path/to/image.jpg", function (err, image) {
// エラーがなければ、画像の処理をする
});
Jimp.read("./path/to/image.jpg").then(function (image) {
// 画像の処理をする
}).catch(function (err) {
// エラー処理をする
});パスだけではなく、バッファやURLからでも取得できます。
Jimp.read(lenna.buffer, function (err, image) {
// エラーがなければ、画像の処理をする
});
Jimp.read("http://www.example.com/path/to/lenna.jpg", function (err, image) {
// エラーがなければ、画像の処理をする
});基本的な画像処理メソッド
取得したimageオブジェクトは、以下のようなメソッドを持っています。
/* サイズ変更 */
image.contain( w, h[, alignBits || mode, mode] ); // 画像を指定された幅と高さに全て含まれるよう縦横比を維持して拡大/縮小します
image.cover( w, h[, alignBits || mode, mode] ); // 画像を指定された幅と高さに全て覆われるよう縦横比を維持して拡大/縮小します
image.resize( w, h[, mode] ); // 画像のサイズを指定された幅と高さに変更します
image.scale( f[, mode] ); // 画像を指定された割合で拡大/縮小します
image.scaleToFit( w, h[, mode] ); // 指定された幅と高さに収まる最大サイズに画像を拡大/縮小します
// オプションのmodeは、すべてのサイズ変更メソッドへ渡すことができます
/* 切り抜き */
image.autocrop(); // 画像から同じ色の枠線を自動的に切り抜きます
image.crop( x, y, w, h ); // 指定された領域を切り抜きます
/* 合成 */
image.blit( src, x, y[, srcx, srcy, srcw, srch] );
// 指定した画像にイメージ全体を配置・合成します。オプションでトリミングします
image.composite( src, x, y ); // 指定した画像をイメージ全体に配置・合成します
image.mask( src, x, y ); // 平均ピクセル値を使って指定した画像でイメージをマスクします
/* 反転と回転 */
image.flip( horz, vert ); // イメージを水平方向または垂直方向に反転します
image.mirror( horz, vert ); // flipメソッドのエイリアス
image.rotate( deg[, mode] ); // イメージを時計回りに回転させます。オプションで、サイズ変更モードを渡すことができます。`false`が2番目のパラメータとして渡された場合、画像の幅と高さはリサイズされません
// ExifのOrientaion定義を持つJPEG画像は、必要に応じて自動的に再配置されます
/* 色 */
image.brightness( val ); // 明るさを-1〜+1の値で調整します
image.contrast( val ); // コントラストを-1〜+1の値で調整します
image.dither565(); // 色空間を16ビットに減らします（RGB565）
image.greyscale(); // イメージを白黒にします
image.invert(); // イメージの色を反転させます
image.normalize(); // 画像のチャンネルを正規化します
/* アルファチャンネル（不透明度） */
image.fade( f ); // 0〜1の係数で画像をフェードします。0は効果がなく、1は透明になります
image.opacity( f ); // 各ピクセルのアルファチャンネルに係数fを掛けます
image.opaque(); // すべてのピクセルのアルファチャンネルを完全に不透明に設定します
image.background( hex ); // デフォルトの新しいピクセルカラー（0xFFFFFFFFや0x00000000など）を設定します
/* ぼかし */
image.gaussian( r ); // 画像をrピクセルだけぼかします（非常に遅い）
image.blur( r ); // 画像をrピクセルだけ素早く画像をぼかします
/* エフェクト */
image.posterize( n ); // 画像にnレベルのポスタリゼーションエフェクトを適用します
image.sepia(); // 画像をセピア調にします上記の各メソッドを利用して、やりたい画像処理を実装しましょう。
ここに記載しているメソッド以外にも、まだ様々なメソッドが存在します。全メソッドの詳細はこちらを参照してください。
ブラウザでの利用方法
ブラウザで利用する際は、以下のようにします。
<script src="jimp.min.js"></script>
<script>
Jimp.read("lenna.png").then(function (lenna) {
lenna.resize(256, 256) // resize
.quality(60) // set JPEG quality
.greyscale() // set greyscale
.getBase64(Jimp.MIME_JPEG, function (err, src) {
var img = document.createElement("img");
img.setAttribute("src", src);
document.body.appendChild(img);
});
}).catch(function (err) {
console.error(err);
});
</script>上記の基本的な画像処理メソッドと同様に利用します。画像の出力はgetBase64メソッドを利用し、Base64形式で<img>タグを作成します。
まとめ
基本的な画像処理は、Jimpがあればラクラク実装できそうです。
ぜひ導入を検討してみてはいかがでしょうか。