🦁

sharp-画像形式変換ライブラリの使い方 (webp)

2025/02/10に公開

sharpとは?

画像形式をjpeg、png、webpなどに変換できるライブラリ

主な使用用途

投稿される画像をデータベースストレージに保存する時に、jpegのような容量の大きいファイルだとすぐにいっぱいになってしまうので、webpに変換して節約することができる

インストール

npm install sharp

使い方

import sharp from 'sharp';

        const fileBuffer = await file.arrayBuffer();//*1
        const webpBuffer = await sharp(Buffer.from(fileBuffer))//*2
          .toFormat("webp", { quality: 80 }) // WebP変換 & 画質80%
          .toBuffer();

*1 fileをarrayBufferにして
*2 arrayBufferをBufferにする

chatGPT解説
なぜ arrayBuffer() を使うのか? file.arrayBuffer() を使う理由は、File オブジェクトを Buffer に変換するため です。 Node.js のライブラリ(例:sharp や fs)は バイナリデータ(Buffer) を扱うので、 File オブジェクトのままでは使えません。 そのため、一度 arrayBuffer() を使って ArrayBuffer に変換し、さらに Buffer に変換します。

Bufferとは?

Buffer は、バイナリデータ(生のデータ)を扱うためのオブジェクト です。 通常、JavaScript は string や number などのデータ型を扱いますが、画像・音声・動画・ファイルなどのデータ は バイナリデータ(0と1のデータ)として扱う必要があります。 そのため、Buffer を使うと、それらのバイナリデータをメモリ上に保持して操作できます。

Discussion