Why did I make it? As a beginner, I need to understand how exactly JavaScript works. This small project made me think about how would I implement these features using JavaScript.
This project is for beginners, so beginners follow up the guide and if you are experienced feel to add something you are free to do so.
Look at the end result, that's we gonna create today
Let's dive into coding :
As you can see the webpage we need basic set of five inputs of type = "range" which makes a slider on the HTML page which we can further use to manipulate properties of the image. Further on we need an input type = "file", an img tag to show the preview of the image and a download button to download the resulting image.
<label for="brightness">Brightness:<br></label>
<input type="range" id="brightness" min="0" max="2" step="0.1" value="1">
Next, we can make similar tags for Contrast, Saturation, Blur and Rotation. Now we need to take input, need a button to download and need an img tag to show the preview of the image.
<input type="file" id="image-input" accept="image/*">
<img id="image-preview" src="">
<button id="download-btn">Download Image</button>
Now we have an external frame, but now we need the working under the hood that is the JavaScript. Add event listener to every input and button.
const brightnessRange = document.getElementById('brightness');
//Other property codes go here
const imageInput = document.getElementById('image-input');
const imagePreview = document.getElementById('image-preview');
After adding these we need to show a preview of the image in our browser which can be done using the link we get from input to redirect it to the preview link.
imageInput.addEventListener('change', (e) => {
const file = e.target.files[0]; // We need to traget the first link/file.
const reader = new FileReader(); //make a FileReader class.
reader.onload = () => {
imagePreview.src = reader.result;
}; //Load image in preview as soon as FileReader reads the image.
if (file) {
reader.readAsDataURL(file);
}//If file holds a valid rendered image load it.
});
Now we need to manipulate the image preview section, adding EventListener to each element seems the way.
brightnessRange.addEventListener('input', applyFilters);
//.......make similar for other sections
rotateRange.addEventListener('input', applyFilters);
Take the input change and call the function applyFilters.
function applyFilters() {
const brightnessValue = brightnessRange.value;
const contrastValue = contrastRange.value;
const saturationValue = saturationRange.value;
const blurValue = blurRange.value;
const rotateValue = rotateRange.value;
//Manipulate the style to make changes in CSS of image.
//We can also use TweenLite to do so.
imagePreview.style.filter = `brightness(${brightnessValue}) contrast(${contrastValue}) saturate(${saturationValue}) blur(${blurValue}px)`;
imagePreview.style.transform = `rotate(${rotateValue}deg)`;
}
Now we need to download this image. We can do this by adjusting a canvas onto the preview image and adding an EventListener to the download button. But we need to manipulate the image first and then give a trigger to download the image.
downloadButton.addEventListener('click', () => {
//Initialise a canvas
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// Set canvas dimensions
canvas.width = imagePreview.width;
canvas.height = imagePreview.height;
// Apply filters and transformations to the canvas
context.filter = `brightness(${brightnessRange.value}) contrast(${contrastRange.value}) saturate(${saturationRange.value})`;
context.rotate((rotateRange.value * Math.PI) / 180);
// Convert degrees to radians
context.drawImage(imagePreview, 0, 0, canvas.width, canvas.height);
// Draw image with matching dimensions
// Convert canvas to data URL
const editedImageURL = canvas.toDataURL('image/jpeg');
// Create a download link
const downloadLink = document.createElement('a');
downloadLink.href = editedImageURL;
downloadLink.download = 'edited_image.jpg';
downloadLink.click();
});
Add CSS to make it look better as you want.
Disclaimer: The rotate image button is not working as intended.
Suggestion: Try to use a blank canvas and draw the image onto the canvas to rotate it.
You can use this editor here :
Thank You for following till the end and your lovely support !
Follow and Like for more......
That's it for the day 👋
Top comments (2)
Download button downloads a blank image
Thank you for addressing the issue, certainly the rotate image isn't working properly, other features are working. I will edit and inform that on the blog.