All Projects → nitin42 → React Imgpro

nitin42 / React Imgpro

📷 Image Processing Component for React

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to React Imgpro

Simplerenderengine
Small C++14 render engine
Stars: ✭ 253 (-88.43%)
Mutual labels:  opengl, webgl, shaders
3d Game Shaders For Beginners
🎮 A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
Stars: ✭ 11,698 (+435.13%)
Mutual labels:  opengl, webgl, shaders
Tinyrenderer
A brief computer graphics / rendering course
Stars: ✭ 11,776 (+438.7%)
Mutual labels:  opengl, shaders, images
3d nn
Raymarching neural network in browsers with WebGL shaders
Stars: ✭ 150 (-93.14%)
Mutual labels:  webgl, shaders
Nimble
An OpenGL renderer with a modern and extensible rendering pipeline.
Stars: ✭ 144 (-93.41%)
Mutual labels:  opengl, shaders
Fsynth
Web-based and pixels-based collaborative synthesizer
Stars: ✭ 146 (-93.32%)
Mutual labels:  webgl, shaders
Frontend
🌏 The front-end application code for https://buildkite.com
Stars: ✭ 132 (-93.96%)
Mutual labels:  graphql, frontend
Gaiasky
Mirror of Gaia Sky repository hosted on Gitlab: https://gitlab.com/langurmonkey/gaiasky
Stars: ✭ 162 (-92.59%)
Mutual labels:  opengl, shaders
Reshade
A generic post-processing injector for games and video software.
Stars: ✭ 2,285 (+4.53%)
Mutual labels:  opengl, shaders
Vue Displacement Slideshow
A Vue.js 2.0 slideshow component working with Three.js
Stars: ✭ 165 (-92.45%)
Mutual labels:  webgl, images
React Regl
React Fiber Reconciler Renderer for Regl WebGL
Stars: ✭ 171 (-92.18%)
Mutual labels:  webgl, shaders
Androidcamera
🔥🔥🔥自定义Android相机(仿抖音 TikTok),其中功能包括视频人脸识别贴纸,美颜,分段录制,视频裁剪,视频帧处理,获取视频关键帧,视频旋转,添加滤镜,添加水印,合成Gif到视频,文字转视频,图片转视频,音视频合成,音频变声处理,SoundTouch,Fmod音频处理。 Android camera(imitation Tik Tok), which includes video editor,audio editor,video face recognition stickers, segment recording,video cropping, video frame processing, get the first video frame, key frame, v…
Stars: ✭ 2,112 (-3.39%)
Mutual labels:  opengl, filters
Framework
Strongly-typed JavaScript object with support for validation and error handling.
Stars: ✭ 136 (-93.78%)
Mutual labels:  graphql, frontend
Gl
Go cross-platform OpenGL bindings.
Stars: ✭ 148 (-93.23%)
Mutual labels:  opengl, webgl
Filament
Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WebGL2
Stars: ✭ 13,215 (+504.53%)
Mutual labels:  opengl, webgl
Glsl Godrays
This module implements a volumetric light scattering effect(godrays)
Stars: ✭ 155 (-92.91%)
Mutual labels:  webgl, shaders
Glsltuto
GLSL shaders tutorial
Stars: ✭ 168 (-92.31%)
Mutual labels:  opengl, shaders
Aframe Effects
A VR Ready Post processing framework for Three.js and/or A-Frame
Stars: ✭ 176 (-91.95%)
Mutual labels:  webgl, shaders
Flextgl
OpenGL and Vulkan header and loader generator.
Stars: ✭ 180 (-91.77%)
Mutual labels:  opengl, webgl
Gcanvas
A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎) https://alibaba.github.io/GCanvas
Stars: ✭ 1,705 (-22%)
Mutual labels:  opengl, webgl

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/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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].