Nagging Mario's Princess

    simple-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    SimpleImage

    Simple image manipulation

    GitHub release Build Status codecov Codacy Badge

    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

    Install

    npm i simple-image

    DownloadsWeekly Downloads

    112

    Version

    1.0.3

    License

    Apache-2.0

    Unpacked Size

    32.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • bameyrick