Image Filter - Web App
FilterPro is a Javascript CSS HTML web app that lets users apply common filters to images which can then be viewed and downloaded.
We wanted to make a lightweight web app that lets users filter their favorite images. We wanted the it to be fast, fun, and easy to use.
FilterPro accepts images stored as text in a file where the first two lines contain image height and width, and each row after that lists a pixel's r g b values from 0 to 100 as shown below:
[WIDTH] \n [HEIGHT] \n [PIXEL_0_0] \n [PIXEL_0_1] \n [PIXEL_0_2] ... [PIXEL_0_[HEIGHT]-1] \n [PIXEL_1_0] \n [PIXEL_1_1] \n [PIXEL_1_2] \n ... [PIXEL_1_[HEIGHT]-1] \n ... [PIXEL_[WIDTH]-1_0] \n [PIXEL_[WIDTH]-1_1] \n [PIXEL_[WIDTH]-1_2] \n ... [PIXEL_[WIDTH]-1_[HEIGHT]-1] \n
After a successful upload, the image is stored in a JSON string format in the session storage of the browser. Users are then free to blur, recolor, grayscale, and try any of the other image modifications options offered on the website.
A histogram shows the counts of the R,G and B values in the image at that point in time.
The image can be fingerprinted. (fingerprinting refers to encoding a string in RGB values, that can later be decoded).
The image after modification can be downloaded to a new text file.
RichardKalich rmicky@bu.edu Richard Kalich
AlexanderHack alexhack@bu.edu AlexanderHack
WenyuanLiu wenl@bu.edu WenyuanLiu
DenaldaGashi dgashi@bu.edu DenaldaGashi
ZaneElKilany zane2027@bu.edu ZaneElKilany
TymoteuszPardej tpardej@bu.edu Tymoteusz Pardej
JiahaoHe tomhe@bu.edu Jiahao He
[The final version of the role table. ]
| Name: | Project Lead | Front End 1 | Front End 2 | Back End 1 | Back End 2 | Documenter | Tester | Total |
|---|---|---|---|---|---|---|---|---|
| Alexander | 25 | 50 | 25 | 100 | ||||
| Zane | 25 | 25 | 50 | 100 | ||||
| Denalda | 25 | 50 | 25 | 100 | ||||
| Micky | 50 | 50 | 100 | |||||
| Tymoteusz | 50 | 25 | 25 | 100 | ||||
| Wenyuan | 50 | 50 | 100 | |||||
| Jiahao | 50 | 25 | 25 | 100 | ||||
| Total | 100 | 100 | 100 | 100 | 100 | 100 | 100 | 100 |
Tymoteusz Pardej - Worked on fingerprint adding and decoding, make blue and make green functions, download function, Project Report
Wenyuan Liu - Grey scale
Alexander Hack - File upload and storage, display, blur, recolor, event triggers, general file structure
Jiahao He - Histogram
Zane ElKilany - worked on and completed both the front end HTML & CSS and back end JavaScript for some features, and worked on the final presentation.
Richard Kalich - Created Test images, worked on presentation, Project Report,
Denalda Gashi - Created and worked on the Front End HTML & CSS and worked on the project presentation
Accept an image upload stored in the above format
Display the image to the screen
Recolor the image by zero-ing out all green and blue components of pixels (resulting in a red image)
[A list of any minimum requirements not completed or only partially completed]
All minimum requirements completed.
Allow the user to recolor any one color in the image with a different one [5%]
Display a histogram of the colors present in the pixels of the image [%10]
Implement a blurring algorithm that averages each pixel's Red, Green, and Blue values with those of its immediate horizontal and vertical neighbors, in some order. [%10]
Allow the user to convert your image to Grayscale by replacing each pixel color component by the average of its Red, Green, and Blue components. For example, pixel color [100 50 3] would change to [51 51 51] [%10]
Allow the user to add a fingerprint string to the image by converting the string to binary and adding each bit, one by one, to the least significant bit of each pixel's colors. Your app should be able to decode the fingerprint as well. [%20]
[A list of possible features that were only partially completed]
All source code can be found in this repository.
- In the terminal, navigate to your preferred install directory
cd <directory>/<subdirectory>
- Git clone the repo there
git clone https://agile.bu.edu/gitlab/ec327/projects/group13project.git
- open filterpro.html in a browser of your choice.
Upload an image by clicking the "upload image" button. Try some of our test images in the "TestImages" directory of the repo.
Upon a successful file upload, the image will be displayed on the website. The first group of buttons (blur, grayscale, make red), will apply their respective changes to the image below. Chain multiple functions together to get the effect of successive filters being applied. Click "restore" to restore the image to what you originally uploaded.
Toggle the "display histogram" button on or off to display the histogram with the colors present in the image. It will update with each modification of the image.
Recolor a color in the image by entering its RGB code in the input box, choosing what you want to change it to, and hitting "recolor". This function works best on Chrome because the color select popup let's you enter R,G, and B values out of 100 which can be gotten directly from the values in the file that you uploaded. Firefox wants a hex code.
Add a fingerprint string to the image by entering it in the text box. The image will change slightly, however the change is more easily detected in the histogram. Decode the fingerprint string by clicking decode. You can verify that this works by clearing the fingerprint input field once you add a fingerprint and then hitting "decode".
Click "download" to download your modified image as a text file at the end of your session.
If you want to upload your own images, the maximum number of pixels allowed is roughly 82000 due to the way that the image is stored in the browser. Keep in mind that if you are converting an image in a native image format such as a png to the text format, your file will grow in size. The 82000 pixels refers to the number of pixels in the text format after conversion.
The uploaded image does not have to be a .txt file. You can write your image to any file extension as long as it adheres the specified format. You can create and verify that your file is correct by opening it in a text editor. Make sure that there are no newlines at the end of your document.
Restoring the original image (A user can request that the displayed imagebe reverted back to a state before any change were done.)
Updating the preview image in real time (The website can show changes done to the image without a need to refresh the website)
Make the image Blue (changes red and green values of all the pixels to 0)
Make the image Green (changes red and blue values of all the pixels to 0)
Download the modified image (allows the user to download the image onto their computer in the format given in the project description)
Coordinating and distributing work across 7 people.
Feature dependencies: Downstream features could not be implemented or could not be implemented properly until upstream features were put in place which hurts the group's ability to work in parallel.
Having 7 people in the project was a challenge and a blessing, it helped spread the work around, but also was extremely complicated for distributing work
Thanksgiving break stopped our communications for a while, which slowed down the progress on the project.
Some technical challenges we faced were:
- Getting the website to update properly after each filter was applied, without having to reload the website
- Converting the image data into a data type that was easily managed and changed
- getting PNGs as well as image data to be accepted as valid inputs
Yes. We voted on it.