JavaScript , Jimp , Image Manipulation , Node.js

Thursday, October 17, 2019

Node.js と Jimp で画像をリサイズ・クロップ、ピクセル操作する

このイラストを題材にして、 Node.js + Jimp で画像を操作する方法の備忘録です。

リサイズ

作業環境は Macbook Air M1 の Node.js です。

$ node --version
v18.12.1
$ npm --version
8.19.2

以下のようにプロジェクトを作成。

$ mkdir image-crop
$ cd image-crop
$ npm init -y
$ npm install jimp

Jimp のバージョンは 0.22.10 です。(2023-08-19 now)

Jimp の使い方は こちらのオフィシャルドキュメント を見ればだいたいわかります.

プロジェクトのルートに index.js を作成し、以下のコードを記述:

const Jimp = require('jimp');

const imageURL = 'https://osima.jp/imgs/chromebook-flip-c434ta/chromebook-c434ta-w640.png';
Jimp.read(imageURL).then( (image)=> {
    image.resize(256, Jimp.AUTO).write('chromebook.jpg');
});

Jimp.AUTO を使うことで、縦または横だけのサイズを指定して、画像の縦横比を保った状態でリサイズできます。

$ node index.js

これで chromebook.jpg が生成されます。

クロップ

画像の右側の Chromebook を開いたイラストだけをクロップします。 ドキュメントを見ると...

image.crop( x, y, w, h );  

すれば良いようです.

const Jimp = require('jimp');

const imageURL = 'https://osima.jp/imgs/chromebook-flip-c434ta/chromebook-c434ta-w640.png';
Jimp.read(imageURL).then( (image)=> {
    const width  = image.bitmap.width;
    const height = image.bitmap.height;
    
    const left = width/2;
    const top  = 0;
    const right = width;
    const bottom = height;

    // crop パラメータは x,y,w,h で指定するので:
    const x = left;
    const y = top;
    const w = right - left;
    const h = bottom - top;

    image
        .resize(width, Jimp.AUTO)
        .crop( x, y, w, h )
        .write('chromebook-cropped.jpg');
});

実行します。

$ node index.js

結果:

うまくいきました。

ピクセル操作

ピクセル操作の例として、R,G,B の値を半分にしてみます。

const Jimp = require('jimp');

const imageURL = 'https://osima.jp/imgs/chromebook-flip-c434ta/chromebook-c434ta-w640.png';
Jimp.read(imageURL).then( (image)=> {
    const width  = image.bitmap.width;
    const height = image.bitmap.height;
    
    const left = width/2;
    const top  = 0;
    const right = width;
    const bottom = height;

    // crop パラメータは x,y,w,h で指定するので:
    const x = left;
    const y = top;
    const w = right - left;
    const h = bottom - top;

    image.scan(0, 0, image.bitmap.width, image.bitmap.height, (x, y, idx)=> {
        const red   = image.bitmap.data[idx + 0];
        const green = image.bitmap.data[idx + 1];
        const blue  = image.bitmap.data[idx + 2];
        //const alpha = image.bitmap.data[idx + 3];

        //console.log(`${red},${green},${blue},${alpha}`);

        image.bitmap.data[idx + 0] = red / 2;
        image.bitmap.data[idx + 1] = green / 2;
        image.bitmap.data[idx + 2] = blue / 2;
    });

    image
        .resize(width, Jimp.AUTO)
        .crop( x, y, w, h )
        .write('chromebook-cropped-and-change-color.jpg');
});

結果はこの通り。

まとめ

Jimp を使えば、とても簡単に画像操作ができることがわかりました.