mode-image

Installation

• npm

  npm install mode-image

• yarn

  yarn add mode-image

Usage

• rotate
• resize
• crop
• repeatX
• repeatY
• merge

.rotate(radian)

• radian (number): The rotation angle, clockwise in radians.

example

/origin.png (100 x 100)	result

import modImage from "mode-image";

const result = await modeImage("/origin.png")
  .rotate((Math.PI / 180) * 90)
  .toDataUrl();
// result: data:image/png;base64,...

.resize(size)

• size (object):
  • width (number): height to resize
  • height (number): Width to resize

example

/origin.png (150 x 150)	result (50 x 50)

import modImage from "mode-image";

const result = await modeImage("/origin.png")
  .resize({
    width: 50,
    height: 50,
  })
  .toDataUrl();
// data:image/png;base64,...

.crop(area)

• area (object):
  • x (number):
  • y (number):
  • width (number):
  • height (number):

example

/origin.png (150 x 150)	result (50 x 50)

import modImage from "mode-image";

const result = await modeImage("/origin.png")
  .crop({
    x: 50,
    y: 50,
    width: 50,
    height: 50,
  })
  .toDataUrl();
// data:image/png;base64,...

.repeatX(num)

• num (number):

example

/origin.png (150 x 150)	result (450 x 150)

import modImage from "mode-image";

const result = await modeImage("/origin.png").repeatX(3).toDataUrl();
// data:image/png;base64,...

.repeatY(num)

• num (number):

example

/origin.png (150 x 150)	result (300 x 150)

import modImage from "mode-image";

const result = await modeImage("/origin.png").repeatY(2).toDataUrl();
// data:image/png;base64,...

.merge(image)

• image (image source):

example

/ㅣleft.png (100 x 50)	right.png (100 x 50)	result (100 x 50)

import modImage from "mode-image";

const result = await modeImage("/left.png").merge("/right.png").toDataUrl();
// data:image/png;base64,...

License

MIT