Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nitin42/react-imgpro
📷 Image Processing Component for React
https://github.com/nitin42/react-imgpro
filters frontend graphql images opengl react shaders webgl
Last synced: 6 days ago
JSON representation
📷 Image Processing Component for React
- Host: GitHub
- URL: https://github.com/nitin42/react-imgpro
- Owner: nitin42
- Created: 2017-09-02T10:01:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-12-14T17:08:24.000Z (almost 4 years ago)
- Last Synced: 2024-10-29T15:29:25.456Z (about 1 month ago)
- Topics: filters, frontend, graphql, images, opengl, react, shaders, webgl
- Language: JavaScript
- Size: 11.8 MB
- Stars: 2,182
- Watchers: 32
- Forks: 83
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: Docs/CONTRIBUTING.MD
Awesome Lists containing this project
- awesome-github-star - react-imgpro
README
**This project is no longer maintained.**
# react-imgpro
[](https://travis-ci.org/nitin42/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](https://en.wikipedia.org/wiki/Base64) image.
**Example**
```jsx
const mix = {
color: 'mistyrose',
amount: 10
}
class App extends React.Component {
state = { src: '', err: null }
render() {
return (
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](https://www.jsdelivr.com).
```
```
## Usage
```jsx
import React from 'react';
import ProcessImage from 'react-imgpro';
class App extends React.Component {
state = {
src: '',
err: null
}
render() {
return (
this.setState({ src, err})}
/>
)
}
}
```
## Documentation
See the detailed documentation [here](./Docs).
## SSR support ?
Yes, `react-imgpro` supports SSR.
## Contributing
[Contributing guide](https://github.com/nitin42/react-imgpro/blob/master/Docs/CONTRIBUTING.MD).
## Extra resources
If you want to use blenders, plugins and perform event based calculations, try [CamanJS](http://camanjs.com/).
## License
MIT
