What better way to make your photos and images perfect with more vibrancy in colors and image manipulation than the world renowned and wallet burning Photoshop? That's right! A world renowned, non-wallet burning photo editor that can be accessed on any computer without the hassle of having to install a whole new application on multiple different devices for the same outcome! Keeping this in mind, our goal was to recreate as many features as browser-based image processing would allow to create a very user friendly and money saving online photo editor. Given the theme of HueHacks, we felt that this idea was the perfect solution in many different aspects that people would find agreeable due to an individual's innate sense of the definition of "perfect aesthetics" and "eye-catching vibrancy". Having control over how something as simple as a photo looks based on changes in a few key elements enhances the overall effect on both the viewer and producer.
What it does
With PhotoScript, a user is able to upload an image file and manipulate the brightness, contrast, saturation, grayscale, sepia, hue/base color, and blur of their image. Once the user is done, they have the option to download the image directly to their machine as a .png file.
PhotoScript does have authorization and authentication implemented; however, the user is given the choice to register for an account. If the user chooses to not register, they will still have the full capability of image processing that PhotoScript has to offer along with the feature to download the manipulated image, but they will not be given a library to store their previous images and work. PhotoScript is connected to a Google Cloud SQL database that stores all images to be accessed from any device. This feature is only given to users who register for an account with PhotoScript.
How we built it
Used to build and format front-end webpage
- Axios: make API calls to the backend
- SCSS: main styling language
Used to build backend microservice API to connect to Google Cloud SQL database
Google Cloud SQL (PostgreSQL)
Database used to store account information and images
Challenges we ran into
Time: This was the first time we have ever developed an application that had anything to do with image processing and manipulation. Researching the concepts and reading several articles on setting up our application properly took up much of our time.
Google Cloud SQL: Although we are familiar with setting up SpringBoot to connect to a local PostgreSQL database, connecting it to a Google Cloud server was a bit of a challenge. We did spend a good amount of time testing many different methods that we found online, only to find the simplest method of attaching the IP address of the database to our API was the answer.
Saving an image: Saving the image in the database proved to be much more difficult than what was anticipated. Understanding the differences and conversions between a
base64string while implementing a
fileReaderfor the first time was an obstacle to overcome during this process.
Accomplishments that we're proud of
A tiny little backstory about our team: we are all Developer I's who have been in the software development industry for sub six months. For us to develop something like this within the span of two days was an eye opening experience as to what we are able to accomplish. We are extremely proud to be able to say that we have implemented almost every single idea that we devised for PhotoScript at the beginning of this hackathon along with some ideas where we went above and beyond to implement impromptu features that we came up with as we went along. The speed at which we took in new information with a very good understanding of the concepts was awesome in every aspect of the word. Furthermore, using what we learned to make this project happen was incredible.
What we learned
Client side logic: With our previous experience in project, most of the functionality and data handling/manipulation logic code was held in our backend. To learn new techniques and concepts in regards to data manipulation in the front end was very interesting and overall made us better developers.
Google Cloud SQL: Every project we have developed that involved connecting to a database was done at the local level. Learning how to connect a Java SpringBoot application to a remote database on the cloud gave us some more insight as to how remote cloud servers work and how our projects can be accessed publicly.
SASS/SCSS: We have never used SASS/SCSS to style our webpages before. Throughout this project, we have learned the functional benefits of SASS compared to our usual go-to CSS.
Other learned concepts:
- Uint8Array, ByteArray, Base64, DataURL and conversions between
- Canvas HTML element
- Logic behind click-and-drag elements
- Logic behind zoom-in and zoom-out
- CSS variables
- How to use video editing software
What's next for PhotoScript
Although PhotoScript is able to make images look more aesthetically pleasing, it is nowhere near the level of Photoshop and is, at the very least, basic. At this point in time, PhotoScript only scratches the surface as far as image manipulation goes with its seven different options, but that just leaves room for improvements and the ability to upscale with more features and functionality. Another area of improvement is optimization. There are definitely better, more optimized ways to handle and store data than what PhotoScript has implemented. Optimizing these areas will allow the application to run more smoothly and at a faster rate. Once these improvements have been put in place, we believe that PhotoScript is ready for a very successful deployment.