@foxandgeese/pngjs-image
v1.1.0
Published
JavaScript-based PNG image encoder, decoder, and manipulator
Downloads
516
Readme
PNGjs-Image
JavaScript-based PNG image encoder, decoder, and manipulator
Table of Contents
##Installation
Install this module with the following command:
npm install pngjs-image
Add the module to your package.json
dependencies:
npm install --save pngjs-image
Add the module to your package.json
dev-dependencies:
npm install --save-dev pngjs-image
Require the module in your source-code:
var PNGImage = require('pngjs-image');
##Usage
Example: Creating a new image
var image = PNGImage.createImage(100, 300);
// Get width and height
console.log(image.getWidth());
console.log(image.getHeight());
// Set a pixel at (20, 30) with red, having an alpha value of 100 (half-transparent)
image.setAt(20, 30, { red:255, green:0, blue:0, alpha:100 });
// Get index of coordinate in the image buffer
var index = image.getIndex(20, 30);
// Print the red color value
console.log(image.getRed(index));
// Get low level image object with buffer from the 'pngjs' package
var pngjs = image.getImage();
image.writeImage('path/to/file', function (err) {
if (err) throw err;
console.log('Written to the file');
});
Example: Loading an image
PNGImage.readImage('path/to/file', function (err, image) {
if (err) throw err;
// Get width and height
console.log(image.getWidth());
console.log(image.getHeight());
// Set a pixel at (20, 30) with red, having an alpha value of 100 (half-transparent)
image.setAt(20, 30, { red:255, green:0, blue:0, alpha:100 });
});
Example: Loading an image from an url
PNGImage.readImage('https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37_2x.png', function (err, image) {
if (err) throw err;
// The image is in the 'image' variable if everything went well
});
###Static-Methods
<PNGImage> = PNGImage.addFilter(key, fn)
Adds thefn
filter with identifierkey
to the filter-list<PNGImage> = PNGImage.createImage(width, height)
Creates an image with the given size<PNGImage> = PNGImage.copyImage(image)
Copies an image into a new containerPNGImage.readImage(path, fn)
Loads an image from the file or url, calling thefn
function when donePNGImage.loadImage(blob, fn)
Loads an image from memory, calling thefn
function when done
###Instance-Methods
<pngjs> = image.getImage()
Gets thepngjs
instance<Buffer> = image.getBlob()
Gets the data as a buffer object<int> = image.getWidth()
Gets the width of the image<int> = image.getHeight()
Gets the height of the imageimage.clip(x, y, width, height)
Clips the current image; the dimensions have to be smaller than the original imageimage.fillRect(x, y, width, height, color)
Fills the rectangle with the supplied colorimage.applyFilters(filters, returnResult)
Applies a list of filters to the image<int> = image.getIndex(x, y)
Converts the x and y coordinates to the sequential index of the image bufferimage.writeImage(path, fn)
Writes the image to the filesystem and calling thefn
function when doneimage.toBlob(fn)
Exports data to a buffer and calling thefn
function when done
####Pixel manipulation
<uint32> = image.getAtIndex(idx)
Gets complete 32-bit pixel at indexidx
<uint32> = image.getAt(x, y)
Gets complete 32-bit pixel at the x and y coordinate<uint32> = image.getPixel(x, y)
Gets complete 32-bit pixel at the x and y coordinateimage.setAtIndex(idx, color)
Sets a specific color at the index. A color left-off will not be modified.image.setAt(x, y, color)
Sets a specific color at the x and y coordinate. A color left-off will not be modified.image.setPixel(x, y, color)
Sets a specific color at the x and y coordinate. A color left-off will not be modified.<uint32> = image.getColorAtIndex(idx)
Gets the color components of the pixel at indexidx
<uint32> = image.getColor(x, y)
Gets the color components of the pixel at the x and y coordinate<uint8> = image.getRed(idx)
Gets the red intensity at an indeximage.setRed(idx, value, opacity)
Sets the red intensity at an index<uint8> = image.getGreen(idx)
Gets the green intensity at an indeximage.setGreen(idx, value, opacity)
Sets the green intensity at an index<uint8> = image.getBlue(idx)
Gets the blue intensity at an indeximage.setBlue(idx, value, opacity)
Sets the blue intensity at an index<uint8> = image.getAlpha(idx)
Gets the alpha intensity at an indeximage.setAlpha(idx, value, opacity)
Sets the alpha intensity at an index
####Pixel conversion
<uint32> = image.getBlurPixelAt(idx, funcName)
Gets the blurred color of a pixel at indexidx
<uint32> = image.getYIQAtIndex(idx)
Gets the YIQ-value of a pixel at indexidx
<uint32> = image.getYIQ(x, y)
Gets the YIQ-value of a pixel at the x and y coordinate<uint32> = image.getLumaAtIndex(idx)
Gets the luma of a pixel at indexidx
<uint32> = image.getLuma(x, y)
Gets the luma of a pixel at the x and y coordinate<uint32> = image.getSepiaAtIndex(idx)
Gets the sepia-color of a pixel at indexidx
<uint32> = image.getSepia(x, y)
Gets the sepia-color of a pixel at the x and y coordinate<uint32> = image.getLuminosityAtIndex(idx)
Gets the luminosity of a pixel at indexidx
<uint32> = image.getLuminosity(x, y)
Gets the luminosity of a pixel at the x and y coordinate<uint32> = image.getLightnessAtIndex(idx)
Gets the lightness of a pixel at indexidx
<uint32> = image.getLightness(x, y)
Gets the lightness of a pixel at the x and y coordinate<uint32> = image.getGrayScaleAtIndex(idx)
Gets the grayscale-value of a pixel at indexidx
<uint32> = image.getGrayScale(x, y)
Gets the grayscale-value of a pixel at the x and y coordinate
###Filters Following filters can be applied to an image:
- blur
- grayScale
- lightness
- luma
- luminosity
- sepia
##API-Documentation
Generate the documentation with following command:
npm run docs
The documentation will be generated in the docs
folder of the module root.
##Tests
Run the tests with the following command:
npm run test
The code-coverage will be written to the coverage
folder in the module root.
##Third-party libraries
The following third-party libraries are used by this module:
###Dependencies
- pako: https://github.com/nodeca/pako
- pngjs: https://github.com/niegowski/node-pngjs
- stream-buffers: https://github.com/samcday/node-stream-buffer
- underscore: http://underscorejs.org
- request: https://github.com/request/request
###Dev-Dependencies
- chai: http://chaijs.com
- coveralls: https://github.com/cainus/node-coveralls
- codeclimate-test-reporter: https://github.com/codeclimate/javascript-test-reporter
- istanbul: https://github.com/gotwarlost/istanbul
- mocha: https://github.com/visionmedia/mocha
- sinon: http://sinonjs.org
- sinon-chai: https://github.com/domenic/sinon-chai
- yuidocjs: https://github.com/yui/yuidoc
##License
The MIT License
Copyright 2014-2015 Yahoo Inc.