πŸ“· Image Processing Component for React
JavaScript HTML
Switch branches/tags
Latest commit 2e5b357 Sep 13, 2017 @nitin42 server side rendering check
Permalink
Failed to load latest commit information.
Docs added not for fallback approach Sep 7, 2017
public remove worker script Sep 2, 2017
src server side rendering check Sep 12, 2017
.babelrc react-app Sep 2, 2017
.gitignore init Sep 2, 2017
README.md added camanjs link Sep 7, 2017
index.js export main Sep 2, 2017
introduction.jpg init Sep 2, 2017
package.json minor release Sep 12, 2017
react-impro.png logo Sep 2, 2017
webpack.config.dev.js development confi Sep 2, 2017
webpack.config.js omit webworkify Sep 2, 2017

README.md

react-imgpro

status status status yarn license

Image Processing Component for React

Introduction

react-imgpro is a image processing component for React. This component process an image with filters supplied as props and returns a base64 image.

Basic example -

class App extends React.Component {
  state = { src: '', err: null }
  
  render() {
    return (
      <ProcessImage
        image='http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg'
        colors={{
          mix: {
            color: 'mistyrose',
            amount: 10
          }
        }}
        resize={{ width: 500, height: 500, mode: 'bilinear' }}
        processedImage={(src, err) => this.setState({ src, err, })}
      />     
    )
  }
}

Why ?

I was working on a project last month which involved a lot of image processing and I'd to rely on third party libraries. But before using them directly, I'd to learn different concepts in gl (shaders) and then try to implement them in React. The difficult part was not learning but it was the verbosity, boilerplate code and redundancy introduced by the libraries in the codebase. It was getting difficult to organise all the things 😞

So I wanted a layer of abstraction which would make it easy to manipulate the colors of the image, applying filters and gl shaders efficiently with ease. And React's component based model was perfect for hiding all the implementation details in a component πŸ˜„

Demo

Install

npm install react-imgpro

This also depends on react so make sure you've installed it.

Usage

import React from 'react';
import ProcessImage from 'react-imgpro';

class App extends React.Component {
  state = {
    src: '',
    err: null
  }
  
  render() {
    return (
      <ProcessImage
        image='http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg'
        resize={{ width: 500, height: 500 }}
        colors={{
          mix: {
            color: 'mistyrose',
            amount: 20
          }
        }}
        processedImage={(src, err) => this.setState({ src, err})}
      />
    )
  }
}

Documentation

See the detailed documentation here.

Contributing

Contributing guide.

Extra resources

If you want to use blenders, plugins and perform event based calculations, try CamanJS.

License

MIT

Sponsor