https://github.com/kubk/image-pixel-manipulation

Allows to apply various effects/filters on images using Canvas
https://github.com/kubk/image-pixel-manipulation

canvas es6 reactjs redux scss

Last synced: 25 days ago
JSON representation

Allows to apply various effects/filters on images using Canvas

• Host: GitHub
• URL: https://github.com/kubk/image-pixel-manipulation
• Owner: kubk
• Created: 2017-07-06T13:43:34.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-01-25T17:52:27.000Z (almost 3 years ago)
• Last Synced: 2024-04-14T08:34:02.396Z (7 months ago)
• Topics: canvas, es6, reactjs, redux, scss
• Language: JavaScript
• Homepage:
• Size: 1.84 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# image-pixel-manipulation [![Build Status](https://api.travis-ci.org/kubk/image-pixel-manipulation.svg?branch=master)](https://travis-ci.org/kubk/image-pixel-manipulation) 

Allows to apply different effects/filters on images.

## Description

You can upload an image and apply different effects to it. Included effects: saturation, color invert, greyscale, noise, etc. Effects are configurable, for example user can change noise level or select specific channels for saturation.

User-initiated changes are undoable and redoable. ReactJS used as a view layer, because it proposes a simple way to create composable components.

## Demo

Check [demo](https://kubk.github.io/image-pixel-manipulation/build) in your browser.

## Installation

1. `git clone https://github.com/kubk/image-pixel-manipulation`

2. `yarn install`

3. `yarn start`

## Example

![example](out.gif)

## Testing

Run tests using `yarn test`

## Browser support

- Firefox Android v54+

- Chrome Android v59+

- Chrome Desktop v51+

- Firefox Desktop v48+

I plan to add support for older browsers.