Node.jsで画像変換処理

目次

• sharp
• node-imagemagick
• GraphicksMagick

---

sharp

sharp - 概要

Node.jsをサーバとして利用した時に、画像リサイズ処理の最適な方法は何かを調査する。
有名どころでは、ImageMagick。ただ、調べると sharp というNodeモジュールが、ImageMagickよりも速くリサイズ可能とのことなので、これを調べてみる。

参考

Node.js の画像変換モジュール sharp の使い方 基本的な使い方はこれ一つでok
https://r17n.page/2019/08/15/nodejs-sharp-image-converter-how-to-resize/

Node.jsのライブラリsharpでリサイズを試してみる 読みやすい上の記事のライト版
https://blog.kozakana.net/2019/04/sharp-resize/

Node.jsのライブラリsharpの出力形式について 出力形式についてのまとめ
https://blog.kozakana.net/2019/04/sharp-output-format/

sharp - 環境構築

npm i sharp

sharp - 使い方

sharp(`画像ファイルパス or 画像ファイルバイナリ`)
  .resize(1080, 1080)
  .toFile(`出力パス`)

---

node-imagemagick

node-imagemagick - 概要

sharpは直感的ですごく使いやすいが、heic形式（iPhoneで撮った写真の形式）については対応していないとのこと。
※公式のQ&Aのやり取りを見ると、対応する方法があるみたいだが、少し複雑。

その為、heic形式も対応するとなると、imagemagickを利用する必要があり、
imagemagickをNodeから実行する方法として、node-imagemagickというnodeモジュールがある。

node-imagemagick - 環境構築

// imagemagickのインストール
brew install imagemagick

// node-imagemagickのインストール
npm i imagemagick

※ windowsでは、下記からstaticバージョンをインストール。
http://www.imagemagick.org/script/download.php

C:\Program Files(インストールしたimagemagick)\magick.exeにある実行ファイルを複製し convert.exe に変更。（npmパッケージから参照するため）

↓こちらの記事を参考にさせていただきました。
Windows10環境でNode.jsを使って画像処理を行う

node-imagemagick - 使い方

convertの例。imagemagickはコマンドが多すぎるので、都度調査する。

const im = require('imagemagick')

// imagemagickのコマンドを配列形式で指定する
im.convert(['/path/image/image.png' '/path/image/image.jpg'], (err)=> {
  console.log('image magick convert finish')
})

// コマンド文字列を半スペでsplitするほうが使いやすい
const cmd1 = `/path/image/image.png /path/image/image.jpg`
im.convert(cmd1.split(' '), (err)=> {
  console.log('image magick convert finish')
})

// 一つの画像から複数種類の画像を書き出す場合のコマンド文字列例
const cmd2 =
  `${file.path} `+
  `-resize 3840x1080 -write ${filePath}image.jpg ` +
  `-resize 1080x1080 -write ${filePath}imageProFile.jpg ` +
  `-resize 150x150 -write ${filePath}thumbnail.jpg`

im.convert(cmd2.split(' '), (err)=> {
  console.log('image magick convert finish')
})

---

GraphicksMagick

GraphicksMagick - 概要

おまけ。
node-imagemagickのgithubリポジトリのReadMeを確認すると、長い間メンテナンスされていない為、GraphicksMagickを利用推奨とのこと。
使い方もsharpの用にメソッドチェーン方式なので、使いやすそうなので良き。
※ただ、heicの書き出しがうまくいかなかったので不採用。

GraphicksMagick - 環境構築

// imagemagickとgraphicsmagickのインストール
brew install imagemagick
brew install graphicsmagick

// WebPに対応する場合
brew install imagemagick --with-webp

// gmモジュールのインストール
npm i gm

GraphicksMagick - 使い方

const gm = require('gm')

gm('/path/to/my/img.jpg')
.resize(240, 240)
.noProfile()
.write('/path/to/resize.png', function (err) {
  // 書き出し完了後の処理
});