Coder Social home page Coder Social logo

plexigras / pngjs-image Goto Github PK

View Code? Open in Web Editor NEW

This project forked from yahooarchive/pngjs-image

0.0 1.0 0.0 4.13 MB

JavaScript-based PNG image encoder, decoder, and manipulator

Home Page: http://yahoo.github.io/pngjs-image

License: MIT License

JavaScript 100.00%

pngjs-image's Introduction

PNGjs-Image

JavaScript-based PNG image encoder, decoder, and manipulator

Build Status Coveralls Coverage Code Climate Grade

NPM version NPM License

NPM NPM

Coverage Report API Documentation

Gitter Support

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 the fn filter with identifier key 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 container
  • PNGImage.readImage(path, fn) Loads an image from the file or url, calling the fn function when done
  • PNGImage.loadImage(blob, fn) Loads an image from memory, calling the fn function when done

###Instance-Methods

  • <pngjs> = image.getImage() Gets the pngjs 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 image
  • image.clip(x, y, width, height) Clips the current image; the dimensions have to be smaller than the original image
  • image.fillRect(x, y, width, height, color) Fills the rectangle with the supplied color
  • image.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 buffer
  • image.writeImage(path, fn) Writes the image to the filesystem and calling the fn function when done
  • image.toBlob(fn) Exports data to a buffer and calling the fn function when done

####Pixel manipulation

  • <uint32> = image.getAtIndex(idx) Gets complete 32-bit pixel at index idx
  • <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 coordinate
  • image.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 index idx
  • <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 index
  • image.setRed(idx, value, opacity) Sets the red intensity at an index
  • <uint8> = image.getGreen(idx) Gets the green intensity at an index
  • image.setGreen(idx, value, opacity) Sets the green intensity at an index
  • <uint8> = image.getBlue(idx) Gets the blue intensity at an index
  • image.setBlue(idx, value, opacity) Sets the blue intensity at an index
  • <uint8> = image.getAlpha(idx) Gets the alpha intensity at an index
  • image.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 index idx
  • <uint32> = image.getYIQAtIndex(idx) Gets the YIQ-value of a pixel at index idx
  • <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 index idx
  • <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 index idx
  • <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 index idx
  • <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 index idx
  • <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 index idx
  • <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

###Dev-Dependencies

##License

The MIT License

Copyright 2014-2015 Yahoo Inc.

pngjs-image's People

Contributors

davglass avatar marcelerz avatar thesavior avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.