SimpleImage

Simple image manipulation

• SimpleImage
  • Install
    • npm
    • yarn
  • Documentation
  • Usage
    • Creating a SimpleImage
      • With dimensions
      • With an image element
      • With a canvas element
      • With a File
      • With an existing SimpleImage instance
    • Methods
    • Get
    • Set
    • getPixel
    • setPixel
    • getPixels
    • setSize
    • draw
    • toDataUrl
  • SimplePixel
    • Properties
    • Methods
      • setAllFrom

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 |

Methods

setAllFrom

Sets all the colours to match those of a given SimplePixel

| Argument | Description | Type | | -------- | ------------------ | ----------------------------- | | pixel | The pixel to match | SimplePixel |