Awesome Open Source
Awesome Open Source

This project is no longer maintained.

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

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 😞

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/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,711
react (5,295
graphql (1,043
frontend (501
opengl (461
webgl (393
shaders (169
images (165
filters (55

Find Open Source By Browsing 7,000 Topics Across 59 Categories