A one-page app for locally editing pictures in the browser. No data is ever sent to a server.
The image editing library is CamanJS. Yes, the Caman website doesn't use SSL and the library hasn't been updated since 2013, but it still does the trick. This page implements all of the basic filters (e.g. saturation and contrast) and the included presets (e.g. Lomo and Hazy Days) of the library.
The webpage is built using React 17 & Bootstrap 5. Other technologies include Sass, Lodash, and a lot of random Medium posts and Stack Overflow questions.
I built this app to gain hands-on experience with React and Bootstrap, some of the most prolific web technologies out there. I wanted to make a website that was easy to use, actually useful, and secure.
While there are many online photo editing websites, they are either clunky, hard to navigate, or insecure. Being a one-page app that is entirely run locally, that fixes the issues.
- Local file upload/download
- Imgur import and export using their API
- Clone the repository and download the code.
- Run
npm install. - Run
npm startto run a development server. - Build the code with
npm run buildto compile it. - Start a local static server with
npx serve -s build. - Alternatively run
npm run deployto upload it to Github Pages.
CamanJS is licensed under a BSD-3 License by Ryan LeFevre.
Test pictures from Place Kitten and Among Trees artist Mikael Gustaffson.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Builds the app for production and deploys it to Github Pages.
Follows the tutorial on gh-pages deploymnet for predeploy and deploy scripts.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project. Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them.