Simple-image NPM

SimpleImage

Simple image manipulation

SimpleImage

Install

You can install via npm or yarn.

npm

npm install --save simple-image

yarn

yarn add simple-image

Documentation

This documentation is written in TypeScript, however this library works fine in vanilla JavaScript too.

Usage

Creating a SimpleImage

A SimpleImage instance is created asynchronously (beacause we have to wait on image.onload internally), therefore you must await the ready promise.

With dimensions

async function myFn(): void {
  const simpleImage = new SimpleImage(256, 256);

  await simpleImage.ready;

  // Do stuff
}

myFn();

or without async/await:

const simpleImage = new SimpleImage(256, 256);

simpleImage.ready.then(() => {
  // Do stuff
});

With an image element

async function myFn(): void {
  const image: HTMLImageElement = document.getElementById('my-image');

  const simpleImage = new SimpleImage(image);

  await simpleImage.ready;

  // Do stuff
}

myFn();

With a canvas element

async function myFn(): void {
  const canvas: HTMLCanvasElement = document.getElementById('my-canvas');

  const simpleImage = new SimpleImage(canvas);

  await simpleImage.ready;

  // Do stuff
}

myFn();

With a File

const input: HTMLInputElement = document.getElementById('my-input');

input.onchanges = () => {
  const simpleImage = new SimpleImage(input.files[0]);

  await simpleImage.ready;

  // Do stuff
};

With an existing SimpleImage instance

async function myFn(): void {
  const simpleImage = new SimpleImage(256, 256);

  await simpleImage.ready;

  // Do stuff

  const newSimpleImage = new SimpleImage(simpleImage);

  await newSimpleImage.ready;

  // Do stuff
}

myFn();

Methods

Get

There are 4 methods to get a colour at a given position, getRed, getGreen, getBlue, getAlpha.

Argument	Description	Type
x	The x coordinate of the pixel you want to the colour for	number
y	The y coordinate of the pixel you want to the colour for	number

Set

There are 4 methods to set a colour at a given position, getRed, getGreen, getBlue, getAlpha.

Argument	Description	Type
x	The x coordinate of the pixel you want to set the colour for	number
y	The y coordinate of the pixel you want to set the colour for	number
value	Value between 0 and 255 for the colour	number

getPixel

Gets a pixel at any given coordinate:

Argument	Description	Type
x	The x coordinate of the pixel you want to get	number
y	The y coordinate of the pixel you want to get	number

setPixel

Sets a pixel at any given coordinate to match a given pixel:

Argument	Description	Type
x	The x coordinate of the pixel you want to set	number
y	The y coordinate of the pixel you want to set	number
pixel	The pixel you want to match to	`SimplePixel`

getPixels

Returns an array of SimplePixel of all the pixels in the image.

setSize

Sets the size of the SimpleImage to the dimensions provided.

Argument	Description	Type
width	The new width for the image	number
height	The new height for the image	number

draw

Draws the SimpleImage to the provided canvas.

Argument	Description	Type
canvas	The canvas to draw to	`HTMLCanvasElement`

toDataUrl

Returns a data url for the SimpleImage.

SimplePixel

An instance of of a pixel within the SimpleImage.

Properties

Property	Description	Type
x	The x coordinate of the pixel	number
y	The y coordinate of the pixel	number
red	Gets/sets the red value for the pixel. Number between 0 and 255	number
green	Gets/sets the green value for the pixel. Number between 0 and 255	number
blue	Gets/sets the blue value for the pixel. Number between 0 and 255	number
alpha	Gets/sets the alpha value for the pixel. Number between 0 and 255	number