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!

• Rotate

Backlog

• Graphics Object (draw and fill lines and shapes)

Contents

• 
  Interface
  
  
  
  • Creating Bitmaps
  
  
  • 
    Manipulating Bitmaps
    
    
    
    • Set Pixel
    
    
    • Negative
    
    
    • Blur
    
    
    • Crop
    
    
    • Resize
    
    
    • Rotate
    
    
    
    
  
  
  • Reading Images
  
  
  • Writing Images
  
  
  
  


• Release History

Interface

``javascript
var ImageJS = require("imagejs");
`

Creating Bitmaps

`javascript

// Create an uninitialized bitmap 320x200
// Note: the bitmap may be filled with random data
var bitmap = new ImageJS.Bitmap({width: 320, height: 200});

// Create a bitmap filled with green
var greenBitmap = new ImageJS.Bitmap({width: 100, height: 100, color: {r: 255, g: 255, b: 255, a: 255});

// Copy a bitmap
var copy = new ImageJS.Bitmap(otherBitmap);

// Create a bitmap and attach to supplied data structure
var attachedBitmap = new ImageJS.Bitmap({
width: 100,
height: 100,
data: new Buffer(4 100 100)
});

// Create an empty (null) bitmap, ready for reading from file or stream
var nullBitmap = new ImageJS.Bitmap();

`

Manipulating Bitmaps

$3

`javascript
// Set a pixel
// where: 0 <= x < width, 0 <= y < height, 0 <= r,g,b,a < 256
bitmap.setPixel(x,y, r,g,b,a);

// Set a pixesl using a color object
var yellow = {r:255, g:255, b:0}; // alpha defaults to 255
bitmap.setPixel(x,y, yellow);
`

$3

`javascript
// fetch the color of a pixel
var color = bitmap.getPixel(x,y);

// to improve performance you can supply the color object
var color = {};
color = bitmap.getPixel(x,y, color);
`

$3

`javascript
// Create a new bitmap that is a negative of the original
var negative = bitmap.negative();
`

$3

`javascript
// blur with simple gaussian filter
var blurred = bitmap.blur();
`

$3

`javascript
// create a new bitmap from a portion of another
var cropped = bitmap.crop({top: 50, left: 30, width: 100, height: 100});
`

$3

`javascript
// resize to 64x64 icon sized bitmap using nearest neighbor algorithm & stretch to fit
var thumbnail = bitmap.resize({
width: 64, height: 64,
algorithm: "nearestNeighbor"
});

// resize to 100x150 bitmap using bilinear interpolation and cropping to fit, gravity center
var thumbnail = bitmap.resize({
width: 100, height: 150,
algorithm: "bilinearInterpolation",
fit: "crop",
gravity: {x:0.5, y:0.5} // center - note: this is the default
});

// resize to 300x200 bitmap using bicubic interpolation and padding to fit, pad color solid red
var thumbnail = bitmap.resize({
width: 300, height: 200,
algorithm: "bicubicInterpolation",
fit: "pad",
padColor: {r:255, g:0, b:0, a:255}
});

`

Supported Resize Algorithms
* nearestNeighbor
* bilinearInterpolation
* bicubicInterpolation
* hermiteInterpolation
* bezierInterpolation

$3

`javascript
// 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 optional
var red = {r: 255, g: 0, b: 0, a: 255};
var rotated = bitmap.rotate({radians: 0.5, fit: "same", padColor: red});

// rotate image 10 degrees clockwise, preserving entire image and padding with transparent white
var transparentWhite = {r: 255, g: 255, b: 255, a: 0};
var rotated = bitmap.rotate({degrees: -10, fit: "pad", padColor: transparentWhite});

// rotate image 45 degress counterclockwise, cropping so all of the result image comes from the source.
var rotated = bitmap.rotate({degrees: 45, fit: "crop"});

// rotate image 30 degrees counterclockwise, selecting custom dimensions. Note: image will not be scaled.
// default padColor (if required) is transparentBlack.
var rotated = bitmap.rotate({degrees: 30, fit: "custom", width: 100, height: 150});

`

Reading Images

`javascript
// read from a file
var bitmap = new Bitmap();
bitmap.readFile(filename)
.then(function() {
// bitmap is ready
});

// read JPG data from stream
var stream = createReadStream();
var bitmap = new Bitmap();
bitmap.read(stream, { type: ImageJS.ImageType.JPG })
.then(function() {
// bitmap is ready
});

`

Writing Images

`javascript
// write to a jpg file, quality 75 (default is 90)
return bitmap.writeFile("image.jpg", { quality:75 })
.then(function() {
// bitmap has been saved
});

// write PNG Image to a stream
var stream = createWriteStream();
return bitmap.write(stream, {type: ImageJS.ImageType.PNG})
.then(function() {
// bitmap has been written and stream ended
});

``

Release History

| Version | Changes |
| ------- | ------- |
| 0.0.1 | Initial Version |
| 0.0.2 |

• Enhanced Resize
  • New Resize Algorithm: Bilinear Interpolation
  • Stretch, Crop or Pad to Fit
• PNG Image files supported

|
| 0.0.3 |

• Enhanced Resize
  • New Resize Algorithm: Bicubic Interpolation

|
| 0.0.5 |

• Enhanced Resize
  • New Resize Algorithm: Bezier Interpolation
  • 2 Pass algorithm to compensate for undersampling
• Blur Images
• Crop Images

|
| 0.0.6 |

• Internal Restructuring
• Corrected Documentation
• Better Bitmap Construction
• Performance Improvements

|
| 0.0.8 |

• Bug Fixes
  • readFile this bug
  • resize same aspect ratio fix

|
| 0.0.9 |

• Rotate