Giter VIP home page Giter VIP logo

micro-image-transformations's Introduction

micro-image-transformations (v1.0.0)

travis build PRs Welcome
An image processing microlibrary for Node and the web. Though I wrote this as a Node package, I am targetting the web, for users who would like to modify web images. (If I were to make it backend only without reliance on Canvas, I'd use a library like jimp or pngjs)
Unittests are written in mocha and chai

Here is a link to a barebones demo website I put together: https://jimmyshi360.github.io/image-processing-demo/

The transformation JS functions are located in "src/index.js". Tests are in "tests/index.test.js"

My Node package is published so you can download it and use it for your own projeects (installation steps below). The npm package is currently v3.0.0 as I had to publish a few times for testing purposes.

Installation

npm install --save micro-image-transformations

For setting up browserify to use this npm pacakage, run
npm install -g browserify
Then pass the path of the js file that contains the image transform code
browserify src/image_handler.js -o bundle.js
Run this each time you make changes to the file or simply use watchify (another useful npm package).

If already installed, run npm update to check for and install new versions.

Example Usage

Suppose this js file is src/image_handler.js

  //include the 
  var imageTransformLibrary = require('micro-image-transformations');
  
  //grayscale transform
  var grayscaleImage=imageTransformLibrary.grayscale(img);
  
  //render it to canvas
  var context = document.getElementById('image-display').getContext('2d');
  context.drawImage(grayscaleImage,0,0);

Methods

  grayscale(image);  //averages values based on a luminosity equation. (humans are more sensitive to green)
  crop(image, startX, startY, cropWidth, cropHeight);  //uses cartesian coordinates (bottom left corner of image is (0,))

Supported Image Types

  • jpeg
  • png
  • gif
  • ico
  • may support additional image types like tiff and bmp (not tested)

Image Transformations Provided

  • grayscale - Turn an image into grayscale (luminosity correction algorithm used as humans are more sensitive to green)
  • crop - Crop an image.

Contributing

Clone this repository! Submit your PR and Travis will run some tests to make sure it is compliant with current standards.

Testing

In the cloned repository, to run tests, run npm test. Current tests are written in mocha and chai in "tests/index.test.js", testing grayscale and crop functions.

Note: eslint currently disabled due to some Travis complaints.

License

micro-image-transformations is licensed under the MIT license.

micro-image-transformations's People

Contributors

jimmyshi360 avatar

Watchers

Erem Boto avatar James Cloos avatar  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.