Pixels helps working with ImageData color information that is originally stored as huge one dimensional array.

README.md

Pixels

ImageData stores data as one-dimensional array of 8-bit values(RGBA color takes 4 positions for each component), I found this not comfortable for me, so created Pixels class to

• Retrieve/Store color information by X/Y coordinates in image.
• Retrieve/Store color information as single value(RGBA) by position in one-dimensional array of pixels(length = with*height)

Installation

via npm

npm install gist:1788a9282f111476e966aea118100eac --save

via git

git clone https://gist.github.com/burdiuz/1788a9282f111476e966aea118100eac Pixels

API

• new Pixels(imageData:ImageData) - create instance of Pixels to wrap ImageData.
• setImage(imageData:ImageData) - set new source of image color data.
• getPixelPosition(x:uint, y:uint):uint - get pixel position in one-dimensional array of pixels by its X/Y coordinates.
• getPixelPositionRaw(x:uint, y:uint):uint - get pixel's red component position in one-dimensional array of color components(length = with*height*4) by its X/Y coordinates.
• getPixel(x:uint, y:uint):uint - get RGBA color value by its X/Y coordinates.
• getPixelAlpha(x:uint, y:uint):uint - get alpha/opacity value by its X/Y coordinates. Value between 0 and 255.
• getPixelByPosition(pos:uint):uint - get RGBA color value by its position in one-dimensional array of pixels.
• get length:uint - get length of image data one-dimensional array of pixels.
• get width:uint - get image width.
• get height:uint - get image height.
• setPixel(x:uint, y:uint, color:uint) - set RGBA color value to pixel by its X/Y coordinates.
• setPixelByPosition(pos:uint, color:uint) - set RGBA color value to pixel by its position in one-dimensional array of pixels.
• valueOf():ImageData - returns ImageData object.
• [@@iterator]:Generator - generator for for..of cycle. Goes through RGBA color values for each pixel in one-dimensional array of pixels.

package.json

{
  "name": "Pixels",
  "version": "0.0.1",
  "main": "Pixels.js"
}

Pixels.js

'use strict';

export default class Pixels {
  /*
   _image = null;
   _data = null;
   _width = null;
   _height = null;
   */
  constructor(imageData) {
    this.image = imageData;
  }

  set image(imageData) {
    this._image = imageData;
    if (imageData) {
      this._data = imageData.data;
      this._width = imageData.width;
      this._height = imageData.height;
    } else {
      this._data = null;
      this._width = NaN;
      this._height = NaN;
    }
  }

  get image() {
    return this._image;
  }

  getPixelPosition(x, y) {
    return (y * this._width + x);
  }

  getPixelPositionRaw(x, y) {
    return (y * this._width + x) * 4;
  }

  getPixel(x, y) {
    const pos = this.getPixelPositionRaw(x, y);
    return this._data[pos] << 24 | this._data[pos + 1] << 16 | this._data[pos + 2] << 8 | this._data[pos + 3];
    //return this.getPixelByPosition(this.getPixelPosition(x, y));
  }

  getPixelAlpha(x, y) {
    const pos = this.getPixelPositionRaw(x, y);
    return this._data[pos + 3];
  }

  getPixelByPosition(pos) {
    pos *= 4;
    return this._data[pos] << 24 | this._data[pos + 1] << 16 | this._data[pos + 2] << 8 | this._data[pos + 3];
  }

  get length() {
    return this._width * this.height;
  }

  get width() {
    return this._width;
  }

  get height() {
    return this._height;
  }

  setPixel(x, y, color) {
    const pos = this.getPixelPositionRaw(x, y);
    this._data[pos] = color >> 24 & 0xff;
    this._data[pos + 1] = color >>> 16 & 0xff;
    this._data[pos + 2] = color >>> 8 & 0xff;
    this._data[pos + 3] = color & 0xff;
    //this.setPixelByPosition(this.getPixelPosition(x, y), color);
  }

  setPixelByPosition(pos, color) {
    pos *= 4;
    this._data[pos] = color >> 24 & 0xff;
    this._data[pos + 1] = color >>> 16 & 0xff;
    this._data[pos + 2] = color >>> 8 & 0xff;
    this._data[pos + 3] = color & 0xff;
  }

  valueOf() {
    return this._image;
  }

  *[Symbol.iterator]() {
    const length = this.length;
    for (let index = 0; index < length; index++) {
      yield this.getPixelByPosition(index);
    }
  }
}