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.

$3

``bash
npm install --save simple-image
`

$3

`bash
yarn add simple-image
`

Documentation

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

Usage

$3

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

#### With dimensions

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

await simpleImage.ready;

// Do stuff
}

myFn();
`

or without async/await:

`typescript
const simpleImage = new SimpleImage(256, 256);

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

#### With an image element

`typescript
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

`typescript
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

`typescript
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

`typescript
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();
`

$3

$3

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 |

$3

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 |

$3

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 |

$3

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 |

$3

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

$3

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 |

$3

Draws the SimpleImage to the provided canvas.

| Argument | Description | Type |
| -------- | --------------------- | ------------------- |
| canvas | The canvas to draw to | HTMLCanvasElement |

$3

Returns a data url for the SimpleImage.

SimplePixel

An instance of of a pixel within the SimpleImage.

$3

| 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 |

$3

#### setAllFrom

Sets all the colours to match those of a given SimplePixel

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