react-imgpro

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.

Example

const mix = {
    color: 'mistyrose',
    amount: 10
}

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

Motivation

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