πŸ“· Image Processing Component for React
JavaScript HTML
Latest commit f09190d Sep 22, 2017 @nitin42 committed on GitHub size updated!
Permalink
Failed to load latest commit information.
Docs added not for fallback approach Sep 7, 2017
__tests__ Init commit Sep 22, 2017
images Init commit Sep 22, 2017
public remove worker script Sep 2, 2017
src SSR support Sep 22, 2017
webpack re- Sep 22, 2017
.babelrc react-app Sep 2, 2017
.gitignore ignore /public Sep 22, 2017
.travis.yml Init commit Sep 22, 2017
README.md size updated! Sep 22, 2017
index.js export main Sep 2, 2017
package.json V1.3 Sep 22, 2017
yarn.lock Init commit Sep 22, 2017

README.md

react-imgpro

Build Status status status status yarn

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