Single Page Image Editor
Tags: webdev, beginners, javascript, tutorial
Published: 2023-09-19 14:16:50

### 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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wemw1tz408cmil9gz574.png)

------------------------------

**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 : 
{% replit @AniketMahajan5/SimpleImageEditor %}

--------------------------------------

Thank You for following till the end and your lovely support !
Follow and Like for more......
That's it for the day 👋