Join our telegram group Join Now!

How To Make An Image Editor in HTML CSS & JavaScript

In this task (Picture Supervisor in JavaScript), as you've found in the review picture, clients can apply various channels to their picture.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Introduction

Welcome to my blog SR7Themes!
Today the topic is How To Make An Image Editor in HTML CSS & JavaScript Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!


Image Editor | ©SR7Themes
Image Editor | ©SR7Themes

Hey, today in this blog, you’ll learn to create a new project named Build An Basic Image Editor in HTML CSS & JavaScript.


In this project (Image Editor in JavaScript), as you’ve seen in the preview image, users can apply different filters to their image like grayscale, inversion, saturation, and adjust the image brightness. Additionally, users can also rotate or flip the images and save their edited images.

This project is made with vanilla JavaScript. If you’re excited to view a demo of this image editor or want to know what this editor looks like.

Basic Image Editor in JavaScript [Source Codes]

To build an Image Editor using HTML CSS & JavaScript, you need to create three files: HTML, CSS & JavaScript file. Once you create these files, just paste the given codes into your file. If you don’t know how to create these files, where to paste the codes, or don’t want to do these, you can simply download the source code files of this Image Editor by clicking on the given download button that is at the bottom of this page.

First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

<!DOCTYPE html>
<!-- Coding by CodingNepalWeb - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Image Editor in JavaScript | SR7Themes</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/boxicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
  </head>
  <body>
    <div class="container disable">
        <h2>Easy Image Editor</h2>
        <div class="wrapper">
            <div class="editor-panel">
                <div class="filter">
                    <label class="title">Filters</label>
                    <div class="options">
                        <button id="brightness" class="active">Brightness</button>
                        <button id="saturation">Saturation</button>
                        <button id="inversion">Inversion</button>
                        <button id="grayscale">Grayscale</button>
                    </div>
                    <div class="slider">
                        <div class="filter-info">
                            <p class="name">Brighteness</p>
                            <p class="value">100%</p>
                        </div>
                        <input type="range" value="100" min="0" max="200">
                    </div>
                </div>
                <div class="rotate">
                    <label class="title">Rotate & Flip</label>
                    <div class="options">
                        <button id="left"><i class="fa-solid fa-rotate-left"></i></button>
                        <button id="right"><i class="fa-solid fa-rotate-right"></i></button>
                        <button id="horizontal"><i class='bx bx-reflect-vertical'></i></button>
                        <button id="vertical"><i class='bx bx-reflect-horizontal' ></i></button>
                    </div>
                </div>
            </div>
            <div class="preview-img">
                <img src="image-placeholder.svg" alt="preview-img">
            </div>
        </div>
        <div class="controls">
            <button class="reset-filter">Reset Filters</button>
            <div class="row">
                <input type="file" class="file-input" accept="image/*" hidden>
                <button class="choose-img">Choose Image</button>
                <button class="save-img">Save Image</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
    
  </body>
</html>

Second, create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you’ve to create a file with a .css extension.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 10px;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #E3F2FD;
}
.container{
  width: 850px;
  padding: 30px 35px 35px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.container.disable .editor-panel,
.container.disable .controls .reset-filter,
.container.disable .controls .save-img{
  opacity: 0.5;
  pointer-events: none;
}
.container h2{
  margin-top: -8px;
  font-size: 22px;
  font-weight: 500;
}
.container .wrapper{
  display: flex;
  margin: 20px 0;
  min-height: 335px;
}
.wrapper .editor-panel{
  padding: 15px 20px;
  width: 280px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.editor-panel .title{
  display: block;
  font-size: 16px;
  margin-bottom: 12px;
}
.editor-panel .options, .controls{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.editor-panel button{
  outline: none;
  height: 40px;
  font-size: 14px;
  color: #6C757D;
  background: #fff;
  border-radius: 3px;
  margin-bottom: 8px;
  border: 1px solid #aaa;
}
.editor-panel .filter button{
  width: calc(100% / 2 - 4px);
}
.editor-panel button:hover{
  background: #f5f5f5;
}
.filter button.active{
  color: #fff;
  border-color: #5372F0;
  background: #5372F0;
}
.filter .slider{
  margin-top: 12px;
}
.filter .slider .filter-info{
  display: flex;
  color: #464646;
  font-size: 14px;
  justify-content: space-between;
}
.filter .slider input{
  width: 100%;
  height: 5px;
  accent-color: #5372F0;
}
.editor-panel .rotate{
  margin-top: 17px;
}
.editor-panel .rotate button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 4 - 3px);
}
.rotate .options button:nth-child(3),
.rotate .options button:nth-child(4){
  font-size: 18px;
}
.rotate .options button:active{
  color: #fff;
  background: #5372F0;
  border-color: #5372F0;
}
.wrapper .preview-img{
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  margin-left: 20px;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
}
.preview-img img{
  max-width: 490px;
  max-height: 335px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.controls button{
  padding: 11px 20px;
  font-size: 14px;
  border-radius: 3px;
  outline: none;
  color: #fff;
  cursor: pointer;
  background: none;
  transition: all 0.3s ease;
  text-transform: uppercase;
}
.controls .reset-filter{
  color: #6C757D;
  border: 1px solid #6C757D;
}
.controls .reset-filter:hover{
  color: #fff;
  background: #6C757D;
}
.controls .choose-img{
  background: #6C757D;
  border: 1px solid #6C757D;
}
.controls .save-img{
  margin-left: 5px;
  background: #5372F0;
  border: 1px solid #5372F0;
}

@media screen and (max-width: 760px) {
  .container{
    padding: 25px;
  }
  .container .wrapper{
    flex-wrap: wrap-reverse;
  }
  .wrapper .editor-panel{
    width: 100%;
  }
  .wrapper .preview-img{
    width: 100%;
    margin: 0 0 15px;
  }
}

@media screen and (max-width: 500px) {
  .controls button{
    width: 100%;
    margin-bottom: 10px;
  }
  .controls .row{
    width: 100%;
  }
  .controls .row .save-img{
    margin-left: 0px;
  }
}

Last, create a JavaScript file with the name script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with a .js extension.

const fileInput=document.querySelector(".file-input"),filterOptions=document.querySelectorAll(".filter button"),filterName=document.querySelector(".filter-info .name"),filterValue=document.querySelector(".filter-info .value"),filterSlider=document.querySelector(".slider input"),rotateOptions=document.querySelectorAll(".rotate button"),previewImg=document.querySelector(".preview-img img"),resetFilterBtn=document.querySelector(".reset-filter"),chooseImgBtn=document.querySelector(".choose-img"),saveImgBtn=document.querySelector(".save-img");let brightness="100",saturation="100",inversion="0",grayscale="0";let rotate=0,flipHorizontal=1,flipVertical=1;const loadImage=()=>{let file=fileInput.files[0];if(!file)return;previewImg.src=URL.createObjectURL(file);previewImg.addEventListener("load",()=>{resetFilterBtn.click();document.querySelector(".container").classList.remove("disable")})}const applyFilter=()=>{previewImg.style.transform=`rotate(${rotate}deg)scale(${flipHorizontal},${flipVertical})`;previewImg.style.filter=`brightness(${brightness}%)saturate(${saturation}%)invert(${inversion}%)grayscale(${grayscale}%)`}filterOptions.forEach(option=>{option.addEventListener("click",()=>{document.querySelector(".active").classList.remove("active");option.classList.add("active");filterName.innerText=option.innerText;if(option.id==="brightness"){filterSlider.max="200";filterSlider.value=brightness;filterValue.innerText=`${brightness}%`}else if(option.id==="saturation"){filterSlider.max="200";filterSlider.value=saturation;filterValue.innerText=`${saturation}%`}else if(option.id==="inversion"){filterSlider.max="100";filterSlider.value=inversion;filterValue.innerText=`${inversion}%`}else{filterSlider.max="100";filterSlider.value=grayscale;filterValue.innerText=`${grayscale}%`}})});const updateFilter=()=>{filterValue.innerText=`${filterSlider.value}%`;const selectedFilter=document.querySelector(".filter .active");if(selectedFilter.id==="brightness"){brightness=filterSlider.value}else if(selectedFilter.id==="saturation"){saturation=filterSlider.value}else if(selectedFilter.id==="inversion"){inversion=filterSlider.value}else{grayscale=filterSlider.value}applyFilter()}rotateOptions.forEach(option=>{option.addEventListener("click",()=>{if(option.id==="left"){rotate-=90}else if(option.id==="right"){rotate+=90}else if(option.id==="horizontal"){flipHorizontal=flipHorizontal===1?-1:1}else{flipVertical=flipVertical===1?-1:1}applyFilter()})});const resetFilter=()=>{brightness="100";saturation="100";inversion="0";grayscale="0";rotate=0;flipHorizontal=1;flipVertical=1;filterOptions[0].click();applyFilter()}const saveImage=()=>{const canvas=document.createElement("canvas");const ctx=canvas.getContext("2d");canvas.width=previewImg.naturalWidth;canvas.height=previewImg.naturalHeight;ctx.filter=`brightness(${brightness}%)saturate(${saturation}%)invert(${inversion}%)grayscale(${grayscale}%)`;ctx.translate(canvas.width/2,canvas.height/2);if(rotate!==0){ctx.rotate(rotate*Math.PI/180)}ctx.scale(flipHorizontal,flipVertical);ctx.drawImage(previewImg,-canvas.width/2,-canvas.height/2,canvas.width,canvas.height);const link=document.createElement("a");link.download="image.jpg";link.href=canvas.toDataURL();link.click()}filterSlider.addEventListener("input",updateFilter);resetFilterBtn.addEventListener("click",resetFilter);saveImgBtn.addEventListener("click",saveImage);fileInput.addEventListener("change",loadImage);chooseImgBtn.addEventListener("click",()=>fileInput.click());

What you do today can improve all your tomorrows. You cannot escape the responsibility of tomorrow by evading it today. Never give up. Today is hard, tomorrow will be worse, but the day after tomorrow will be sunshine.

Source:
www.codingnepalweb.com/build-image-editor-html-javascript/

Conclusion

I expressed my views on the topic 'How To Make An Image Editor in HTML CSS & JavaScript'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.

Source:
https://www.sr7themes.eu.org/2022/10/how-to-make-image-editor-in-html-css.html

About the Author

Hey there! My name is Saim Rahmani aka Saim, a professional Web Designer, Graphic Designer, UI / Blogger as well as Content Creator. I love to Code

Buy Me A Coffee

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.