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.
End Result
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.
You can use this Image Editor here
Thanks for reading the blog, hope you liked it.