Pixel

Digital Image Processing in Javascript and CSS.

Demo

Installation

NPM

npm install pixel-js --save

Standalone

Use the standalone version in the dist/iife/pixel.js folder.

Use <script> tag to load the file:

<script src="path/to/pixel.js"></script>

ES6 and AMD support

• dist/es6/pixel.js
• dist/amd/pixel.js

Demo

github-pages

or

npm install && npm start

API

Pixel.loadImage

Pixel.loadImage("imageSrc").then((image) => {
  // Now image is ready
}, (error) => {
  // If load failed...
});

Pixel.Canvas(selector, image, width, height)

Arguments:

• selector String|Element
• image Image
• width Number
• height Number

Return:

• Canvas

Pixel.Canvas.prototype.repaint()

Trigger repaint.

Arguments:

• none

Return:

• this

Pixel.Canvas.prototype.clear()

Arguments:

• none

Return:

• this

Pixel.Canvas.prototype.reset()

Arguments:

• none

Return:

• this

Pixel.Canvas.complement()

Arguments:

• none

Return:

• Promise

Pixel.Canvas.linear(x, y)

Rules:

• r' = x * r + y
• g' = x * g + y
• b' = x * b + y
• a' = a

Arguments:

• x Number
• y Number

Return:

• Promise

Pixel.Canvas.opacity()

Pixel.Canvas.binarization()

Pixel.Canvas.gray()

Pixel.Canvas.smooth()

Pixel.Canvas.crosswindow()

Pixel.Canvas.squareWindow()

Pixel.Canvas.highPassFilter()

Pixel.Canvas.sharpenFilter()