JavaScript HTML
Latest commit 99ac6f9 Oct 21, 2017
Permalink
Failed to load latest commit information.
Docs updated with more links Oct 21, 2017
__tests__ removed quality check test Oct 15, 2017
images Init commit Sep 22, 2017
public remove worker script Sep 2, 2017
src fixed ternary condition for root Oct 15, 2017
webpack exclude prod tooling Sep 28, 2017
.babelrc react-app Sep 2, 2017
.gitignore ignore /public Sep 22, 2017
.travis.yml Init commit Sep 22, 2017
README.md some corrections Oct 21, 2017
_config.yml Set theme jekyll-theme-cayman Oct 21, 2017
index.js export main Sep 2, 2017
package.json 1.3.6 Oct 15, 2017
yarn.lock updated Sep 28, 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.

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, })}
      />     
    )
  }
}

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 😞

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.

OR

The UMD build is also available via jsDelivr.

<script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-imgpro@1/build/main.js"></script>

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.

SSR support ?

Yes, react-imgpro supports SSR.

Contributing

Contributing guide.

Extra resources

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

License

MIT

Sponsor