vshushkov-imagejs

0.0.11 • Public • Published

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 = require("imagejs");

Creating Bitmaps

 
// 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: 0, g: 255, b: 0, 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

Set Pixel

// 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);

Get Pixel

// 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);

Negative

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

Blur

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

Crop

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

Resize

// 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

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 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

// 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

// 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
0.0.3
0.0.5
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

Package Sidebar

Install

npm i vshushkov-imagejs

Weekly Downloads

1

Version

0.0.11

License

MIT

Last publish

Collaborators

  • vladimir.shushkov