Single Page Image Editor

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 👋

Comments

[Jon Randy 🎖️]

Download button downloads a blank image

[Aniket]

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.