ImageJS
A Pure JavaScript Image manipulation library. Read and write JPG and PNG image files or streams and perform a number of operations on them.
Installation
npm install imagejs
New Features!
Backlog
- Graphics Object (draw and fill lines and shapes)
Contents
Interface
var ImageJS = ;
Creating Bitmaps
// Create an uninitialized bitmap 320x200// Note: the bitmap may be filled with random datavar bitmap = width: 320 height: 200; // Create a bitmap filled with greenvar greenBitmap = width: 100 height: 100 color: r: 255 g: 255 b: 255 a: 255); // Copy a bitmapvar copy = otherBitmap; // Create a bitmap and attach to supplied data structurevar attachedBitmap = width: 100 height: 100 data: 4 * 100 * 100; // Create an empty (null) bitmap, ready for reading from file or streamvar nullBitmap = ;
Manipulating Bitmaps
Set Pixel
// Set a pixel// where: 0 <= x < width, 0 <= y < height, 0 <= r,g,b,a < 256bitmap; // Set a pixesl using a color objectvar yellow = r:255 g:255 b:0; // alpha defaults to 255bitmap;
Get Pixel
// fetch the color of a pixelvar color = bitmap; // to improve performance you can supply the color objectvar color = {};color = bitmap;
Negative
// Create a new bitmap that is a negative of the originalvar negative = bitmap;
Blur
// blur with simple gaussian filtervar blurred = bitmap;
Crop
// create a new bitmap from a portion of anothervar cropped = bitmap;
Resize
// resize to 64x64 icon sized bitmap using nearest neighbor algorithm & stretch to fitvar thumbnail = bitmap; // resize to 100x150 bitmap using bilinear interpolation and cropping to fit, gravity centervar thumbnail = bitmap; // resize to 300x200 bitmap using bicubic interpolation and padding to fit, pad color solid redvar thumbnail = bitmap;
Supported Resize Algorithms
- nearestNeighbor
- bilinearInterpolation
- bicubicInterpolation
- hermiteInterpolation
- bezierInterpolation
Rotate
// rotate image 0.5 radians counterclockwise, keeping the dimensions the same and padding with red// Note: default fit is "same" so including it in options is optionalvar red = r: 255 g: 0 b: 0 a: 255;var rotated = bitmap; // rotate image 10 degrees clockwise, preserving entire image and padding with transparent whitevar transparentWhite = r: 255 g: 255 b: 255 a: 0;var rotated = bitmap; // rotate image 45 degress counterclockwise, cropping so all of the result image comes from the source.var rotated = bitmap; // rotate image 30 degrees counterclockwise, selecting custom dimensions. Note: image will not be scaled.// default padColor (if required) is transparentBlack.var rotated = bitmap;
Reading Images
// read from a filevar bitmap = ;bitmap ; // read JPG data from streamvar stream = ;var bitmap = ;bitmap ;
Writing Images
// write to a jpg file, quality 75 (default is 90)return bitmap ; // write PNG Image to a streamvar stream = ;return bitmap ;
Release History
Version | Changes |
---|---|
0.0.1 | Initial Version |
0.0.2 |
|
0.0.3 |
|
0.0.5 |
|
0.0.6 |
|
0.0.8 |
|
0.0.9 |