{"id":13518110,"url":"https://github.com/nitin42/react-imgpro","last_synced_at":"2025-04-13T22:28:56.280Z","repository":{"id":71822834,"uuid":"102187909","full_name":"nitin42/react-imgpro","owner":"nitin42","description":"📷  Image Processing Component for React","archived":false,"fork":false,"pushed_at":"2020-12-14T17:08:24.000Z","size":12325,"stargazers_count":2182,"open_issues_count":7,"forks_count":83,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-10-29T15:29:25.456Z","etag":null,"topics":["filters","frontend","graphql","images","opengl","react","shaders","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"Docs/CONTRIBUTING.MD","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-09-02T10:01:40.000Z","updated_at":"2024-09-24T17:11:05.000Z","dependencies_parsed_at":"2023-03-11T22:45:26.794Z","dependency_job_id":null,"html_url":"https://github.com/nitin42/react-imgpro","commit_stats":{"total_commits":163,"total_committers":6,"mean_commits":"27.166666666666668","dds":0.245398773006135,"last_synced_commit":"bf525f42c8ff4fa2b64fe043a1f92f05ed125a1b"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-imgpro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-imgpro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-imgpro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-imgpro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/react-imgpro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248790425,"owners_count":21162004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["filters","frontend","graphql","images","opengl","react","shaders","webgl"],"created_at":"2024-08-01T05:01:40.857Z","updated_at":"2025-04-13T22:28:55.687Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Images 📸","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"**This project is no longer maintained.**\n\n# react-imgpro\n\n[![Build Status](https://travis-ci.org/nitin42/react-imgpro.svg?branch=master)](https://travis-ci.org/nitin42/react-imgpro)\n![status](https://img.shields.io/badge/version-1.3.14-brightgreen.svg)\n![status](https://img.shields.io/badge/size-13.1KB-brightgreen.svg)\n![status](https://img.shields.io/badge/status-stable-brightgreen.svg)\n![yarn](https://img.shields.io/badge/yarn-1.9.4-blue.svg)\n\n\u003e Image Processing Component for React\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/react-impro.png\" height=\"200\" width=\"200\"\u003e\n\u003c/p\u003e\n\n## Introduction\n\n`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. \n\n**Example**\n\n```jsx\n\nconst mix = {\n    color: 'mistyrose',\n    amount: 10\n}\n\nclass App extends React.Component {\n  state = { src: '', err: null }\n  render() {\n    return (\n      \u003cProcessImage\n        image='http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg'\n        colors={{\n          mix\n        }}\n        resize={{ width: 500, height: 500, mode: 'bilinear' }}\n        processedImage={(src, err) =\u003e this.setState({ src, err, })}\n      /\u003e     \n    )\n  }\n}\n```\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./images/introduction.jpg\" height=\"400\" width=\"800\"\u003e\n\u003c/p\u003e\n\n## Motivation\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.gyazo.com/16f09cba02f9dfeb272cc574f9fbbcff.png\"\u003e\n\u003c/p\u003e\n\nI 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 😞\n\nSo 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 😄 \n\n## Demo\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"http://g.recordit.co/XmhTiP84TD.gif\"\u003e\n\u003c/p\u003e\n\n## Install\n\n```\nnpm install react-imgpro\n```\n\nThis also depends on `react` so make sure you've installed it.\n\nOR\n\nThe UMD build is also available via [jsDelivr](https://www.jsdelivr.com).\n\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/react-imgpro@1/build/main.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport ProcessImage from 'react-imgpro';\n\nclass App extends React.Component {\n  state = {\n    src: '',\n    err: null\n  }\n  \n  render() {\n    return (\n      \u003cProcessImage\n        image='http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg'\n        resize={{ width: 500, height: 500 }}\n        colors={{\n          mix: {\n            color: 'mistyrose',\n            amount: 20\n          }\n        }}\n        processedImage={(src, err) =\u003e this.setState({ src, err})}\n      /\u003e\n    )\n  }\n}\n\n```\n\n## Documentation\n\nSee the detailed documentation [here](./Docs).\n\n## SSR support ?\n\nYes, `react-imgpro` supports SSR.\n\n## Contributing\n\n[Contributing guide](https://github.com/nitin42/react-imgpro/blob/master/Docs/CONTRIBUTING.MD).\n\n## Extra resources\n\nIf you want to use blenders, plugins and perform event based calculations, try [CamanJS](http://camanjs.com/).\n\n## License\n\nMIT\n\n\u003ca href=\"https://app.codesponsor.io/link/FCRW65HPiwhNtebDx2tTc53E/nitin42/react-imgpro\" rel=\"nofollow\"\u003e\u003cimg src=\"https://app.codesponsor.io/embed/FCRW65HPiwhNtebDx2tTc53E/nitin42/react-imgpro.svg\" style=\"width: 888px; height: 68px;\" alt=\"Sponsor\" /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-imgpro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2Freact-imgpro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-imgpro/lists"}