最近、JS を使って楽しいことをしていて、画像を加工する必要があります。インターネット上にはさまざまな方法を記載したチュートリアルが多数あり、一部の方法が必ずしも機能するとは限りません。この記事では、NodeJS を使用して画像を処理するために著者が検証した方法を紹介します。
npm i gm
gm は、開発者が画像を処理できるようにいくつかの JS API を提供するノード ライブラリです。ただし、その下にある GraphicsMagick または ImageMagick に依存しています。実際、gm はこれら 2 つのツールを呼び出すためのコマンド ラインです。
つまり、gm のインストールに加えて、GraphicsMagick または ImageMagick のいずれかをインストールする必要もあります。
イメージマジック著者は MacOS を使用しており、ImageMagick を直接インストールすることを選択しました。
公式 Web サイトのコマンドによると、必要なコードは 1 行のみです (Mac に brew がインストールされている場合)。
brew install imagemagick --with-webp
--with-webpパラメータを紹介します。これは削除できますが、WebP 形式で画像を処理したい場合は追加する必要があります。
環境変数を気にする必要がないので、brew を使用すると便利です。
グラフィックスマジック
もちろん、ImageMagick を使用しない場合は、GraphicsMagick を使用できます。
醸造インストールグラフィックスマジック
最初に ImageMagick をインストールすることを選択しましたが、これを書くと常にエラーが発生しました。
const gm = require('gm');
gm('画像ファイルのパス').crop(幅, 高さ, 0, 0).resize(幅2, 高さ2).quality(品質).write('出力ファイルのパス', function (err) {
if (エラー) {
console.log(err)を返します;
} それ以外 {
console.log('成功');
}
}); ImageMagick を使用したい場合は、上記の書き方は実際には間違っており、 ImageMagickツールを使用することを明確に指定して、次のように記述する必要があります。
const g = require('gm');
const gm = g.subClass({imageMagick: true});
gm('画像ファイルのパス').crop(幅, 高さ, 0, 0).resize(幅2, 高さ2).quality(品質).write('出力ファイルのパス', function (err) {
if (エラー) {
console.log(err)を返します;
} それ以外 {
console.log('成功');
}
});参考までに、gm の一般的に使用される関数を記録します。
注: gm はチェーンで呼び出すことができ、書くのがとても楽しいです。gm(filename) から画像ファイルを読み取り、それをレイヤーごとに処理し、最後に file.write(filename, callback) に書き込みます。
画像をズームする
.resize(width, height)
写真をトリミングする
.crop(width, height, x, y)
画像を回転する
.rotate(color, deg)
color は背景色です (度の回転角度が 90 の倍数でない場合は、背景色が便利です。「#ededed」形式を使用してください)。