An interactive webpage where you can upload your images and adds filters to them.
- General info
- Techologies
- Demo
- Code Description
- Status
This is the final project of the course, Programming Foundations with JavaScript, HTML and CSS, Offered by Duke University through Coursera. It displays a webpage, made by codepen.io, where a user can upload and display images, apply filters to them and reset images to their orignal versions.
- HTML
- CSS
- Javascript
Down below is an image from Unsplash that used to test. Obviously, it has many colors that's why it was preferred to test all filters.
- Original
- GrayScale
- Red Tone
- Rainbow Colors
- Blur Effect
You can try your images and add filters to them using this link:
The code is composed of about 7 buttons. Each button is associated with a javascript function listed below:
"Choose Files" : Allows you to upload your image in the canvas. The image is displayed with its original dimensions.
"makeGrayScale" : Sets the RGB values of all pixels to the average of the current values.
"makeRed" : Based on the average of the RGB values of the pixels, the function does some calculations to add a red filter to the image.
"ResetImage" : Removes all filters and displays the original image through the use of global variables.
"ClearCanvas" : Empties the canvas.
"makeRainbow" : Using the RGB values of the rainbow's seven colors, this function divides the image into 7 stripes, each using the RGB values of one of these colors.
"makeBlue" : This filter is achieved by generating random numbers and based on these numbers, either the original pixel is displayed in the same pixel location or a nearby pixel is displayed in the pixel location.
Project is in progress.