konstantinoskostis / cs50-final-project

The CS50 final project - FilterMe: An intuitive client-side image processing webpage tool

FilterMe

Video Demo: https://www.youtube.com/watch?v=L8Y4eCfyjts

Description

FilterMe is a webpage, built with good old HTML / CSS / JS. What it does is actually pretty simple. It is a client side image processing tool that enables the user to apply a filter on an image that the user has selected.

The tool supports the following features:

• Select an image (PNG / JPEG)
• Preview/Display of the original user given image
• Preview/Display of the final processed image
• The filters that can be applied include:
  • Duplicate / Copy
  • Grayscale
  • Sepia
  • Reflect

The project uses:

• File and FileReader
• Bas64 data encoding/decoding protocol
• sessionStorage object
• Low level canvas HTML/Web API
• The img tag via Image object

It uses a modular JS architecture (ES6 modules) and classes for maximal separation of concerns and re-usability reasons. Essentially via this project a small JS image processing framework is created!

This tool is created for the final project of Harvard CS50 course :-)

Author

Hey! My name is Konstantinos Kostis and i am from Athens, Greece! My Github profile: konstantinoskostis