mode-image

Simple image editing library.

• Installation
• Usage
• License

Installation

• npm

  npm install mode-image

• yarn

  yarn add mode-image

Usage

• modeImage
• rotate
• resize
• crop
• repeatX
• repeatY
• merge
• toDataURL

modeImage(image source)

We can specify image source to editing using modeImage(image source).

• Image URL

  modeImage("/public/foo.png")
    .rotate(angle)
    .crop(area)
    // ...
    .toDataURL()
    .then((result) => {
      result; // data:image/png;base64,R0lGOD....
    });

• Data URL

  The URLs string prefixed with the data:image/... scheme. see MDN Data URL

  modeImage("data:image/png;base64,R0lGOD....")
    .rotate(angle)
    .crop(area)
    // ...
    .toDataURL()
    .then((result) => {
      result; // data:image/png;base64,R0lGOD....
    });

• HTMLImageElement

  The instance of HTMLImageElement.

  const image = new Image();
  image.src = "https://...";
  
  modeImage(image)
    .rotate(angle)
    .crop(area)
    // ...
    .toDataURL()
    .then((result) => {
      result; // data:image/png;base64,R0lGOD....
    });

• in NodeJS

  In NodeJS, we should use custom image, canvas creator. see node-canvas.

  import { createCanvas, Image, loadImage } from "canvas";
  
  const options = {
    createCanvas: createCanvas,
    createImage: () => new Image(),
  };
  const image = await loadImage("./path/foo.png");
  modeImage(image, options)
    .rotate()
    .toDataURL()
    .then((result) => {
      result; // data:image/png;base64,R0lGOD....
    });

.rotate(radian)

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

example

/origin.png (100 x 100)	result (100 x 100)

import modeImage from "mode-image";

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

.resize(size)

• size (object):
  • width (number): The height to change.
  • height (number): The width to change.

example

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

import modeImage 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): The pixels from left side.
  • y (number): The Pixels from right side.
  • width (number): The width pixels of the crop.
  • height (number): The height pixels of the crop.

example

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

import modeImage 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): The number of times to repeat.

example

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

import modeImage from "mode-image";

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

.repeatY(num)

• num (number): The number of times to repeat.

example

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

import modeImage from "mode-image";

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

.merge(image)

• image (image source): The image source merging with the current image. It support same data type with ``

example

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

import modeImage from "mode-image";

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

License

MIT