Node.jsのライブラリsharpでリサイズを試してみる

ImageMagickなどよりも早くリサイズできるNode.jsのライブラリsharpを使ってみました。

• 横幅を指定
• 高さを指定
• 幅、高さを指定してリサイズ(cover)
• 幅、高さを指定してリサイズ(contain)
• 幅、高さを指定してリサイズ(fill)
• 幅、高さを指定してリサイズ(inside)
• 幅、高さを指定してリサイズ(outside)

インストール

npm install sharp

元画像

1024x683の元の画像です。

横幅を指定

アスペクト比を保ったまま横幅512pxにリサイズします。

const sharp = require('sharp')

sharp('image.jpg')
  .resize(512)
  .toFile('output.jpg', (err, info)=>{
    if(err){
      throw err
    }
    console.log(info)
  })

出力

{ format: 'jpeg',
  width: 512,
  height: 342,
  channels: 3,
  premultiplied: false,
  size: 43067 }

出力画像

高さを指定

アスペクト比を保ったまま高さ227pxにリサイズします。

const sharp = require('sharp')

sharp('image.jpg')
  .resize(null, 227)
  .toFile('output.jpg', (err, info)=>{
    if(err){
      throw err
    }
    console.log(info)
  })

出力

{ format: 'jpeg',
  width: 340,
  height: 227,
  channels: 3,
  premultiplied: false,
  size: 20534 }

出力画像

幅、高さを指定してリサイズ(cover)

幅を512px、高さを200pxで指定すると、アスペクト比は保ったまま縦の中央部分が切り出されます。また、デフォルトではfitというパラメータにcoverというのが設定されています。

const sharp = require('sharp')

sharp('image.jpg')
  .resize(512, 200)
  .toFile('output.jpg', (err, info)=>{
    if(err){
      throw err
    }
    console.log(info)
  })

出力

{ format: 'jpeg',
  width: 512,
  height: 200,
  channels: 3,
  premultiplied: false,
  size: 26437 }

出力画像

幅、高さを指定してリサイズ(contain)

指定サイズ内に収まるようにアスペクト比が維持されながらリサイズされて、空白部分は背景色で塗りつぶされます（デフォルトは黒）

const sharp = require('sharp')

sharp('image.jpg')
  .resize(512, 200, {
    fit: 'contain'
  })
  .toFile('output.jpg', (err, info)=>{
    if(err){
      throw err
    }
    console.log(info)
  })

出力

{ format: 'jpeg',
  width: 512,
  height: 200,
  channels: 3,
  premultiplied: false,
  size: 16901 }

出力画像

幅、高さを指定してリサイズ(fill)

アスペクト比を維持せず指定サイズになるようにリサイズします。

{ format: 'jpeg',
  width: 512,
  height: 200,
  channels: 3,
  premultiplied: false,
  size: 26033 }

出力

const sharp = require('sharp')

sharp('image.jpg')
  .resize(512, 200, {
    fit: 'fill'
  })
  .toFile('output.jpg', (err, info)=>{
    if(err){
      throw err
    }
    console.log(info)
  })

出力画像

幅、高さを指定してリサイズ(inside)

トリミングせずアスペクト比固定で指定サイズに収まるようにリサイズします。

const sharp = require('sharp')

sharp('image.jpg')
  .resize(512, 200, {
    fit: 'inside'
  })
  .toFile('output.jpg', (err, info)=>{
    if(err){
      throw err
    }
    console.log(info)
  })

出力

{ format: 'jpeg',
  width: 300,
  height: 200,
  channels: 3,
  premultiplied: false,
  size: 16040 }

出力画像

幅、高さを指定してリサイズ(outside)

トリミングせずアスペクト比固定で縦横指定サイズ以上になる最低サイズでリサイズします。

const sharp = require('sharp')

sharp('image.jpg')
  .resize(512, 200, {
    fit: 'outside'
  })
  .toFile('output.jpg', (err, info)=>{
    if(err){
      throw err
    }
    console.log(info)
  })

出力

{ format: 'jpeg',
  width: 512,
  height: 342,
  channels: 3,
  premultiplied: false,
  size: 43067 }

出力画像

参照

• http://sharp.pixelplumbing.com/en/stable/api-resize/