https://github.com/nitin42/react-tint
A React component that applies image processing filters to an image using Processing
https://github.com/nitin42/react-tint
canvas image-processing p2d processing processingjs react web webgl
Last synced: 3 months ago
JSON representation
A React component that applies image processing filters to an image using Processing
- Host: GitHub
- URL: https://github.com/nitin42/react-tint
- Owner: nitin42
- Created: 2018-01-02T16:44:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-16T17:26:22.000Z (over 7 years ago)
- Last Synced: 2025-03-01T04:31:47.442Z (3 months ago)
- Topics: canvas, image-processing, p2d, processing, processingjs, react, web, webgl
- Language: JavaScript
- Size: 1.17 MB
- Stars: 85
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-tint
> A React component that applies image processing filters to an image using Processing
## Install
```
yarn add react-tint
```
This package also depends on React, so make sure you've already installed it.
## Usage
`react-tint` exposes only a single component, ``, that takes [different props]() as filters and an image, and applies them and returns a new canvas.
```js
import React, { Component } from 'react'
import ImageTint from 'react-tint'
class App extends Component {
render() {
return (
)
}
}
```
## API
### ImageTint
A component that applies image processing filters using Processing.
#### Props
* **`canvas`**
`canvas` prop takes an object with three properties - `height`, `width` and a `renderer` type.
Example -
```js
```
Two types of renderers are supported, **WEBGL** and **P2D**.
The P2D renderer uses OpenGL for faster rendering of two-dimensional graphics but at the expense of speed.
* **`tint`**
`tint` takes different types of data for an image. It can take a simple **string of color name**, **array of values** that includes Red, Green, Blue and alpha value for image transparency and **an object that describes color and alpha channel**.
Example -
**Color name**
```js
```
**Array of values**
```js
```
This array corresponds to => `[RED, GREEN, BLUE, ALPHA]`
**Object describing color and alpha value**
```js