Make a image editor with HTML, CSS and JS.

#beginners #javascript #webdev #tutorial

Introducing FOTOQUICK

Ok, so I find myself needing quick and easy photo manipulation tools. I think many have too found them in my place. So recently, I was challenged to make a simple app within 2 hours. Well, I was searching for ideas for the first half an hour and then I realized about image manipulation. So, I created FOTOQUICK, a simple and easy-to-use photo editing app on the web, which is also built on nothing but HTML, CSS, and JAVASCRIPT !!

Ok so as usual our file structure will be as follows:

1st let's create our HTML file.

We will first of all add bootstrap and other scripts. Also, this is where we will devise our title and favicon

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>FotoQuick by Abhiraj</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" type="image/jpg" href="favicon.ico"/>

  </head>
  <body>
   <div class="sidebar">
     <div class="image_filters">
        <h2 type="button" data-toggle="collapse" data-target="#filters">Image Filters <span class="drop-down">&#9660;</span></h2>
        <div class="collapse" id="filters">
          <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="grayscale()">GrayScale</button>

          <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="bright()">Brighen</button>
          <br>
          <br>
          <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="dark()">Darken</button>
          <button class="btn btn-primary" id="btn" style="font-size: 25px;" onclick="blur_effect()">Blur Effect</button>
          <br>
          <br>
          <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="emboss()">Emboss</button>
          <button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="sharp()">Sharpen</button>
        </div>
        <div class="breaks">
          <br>
          <br>
        </div>
     </div>
     <div class="import_and_export">
       <h2 type="button" data-toggle="collapse" data-target="#import_export">Import and Export <span class="drop-down">&#9660;</span></h2>
       <div class="import_and_export_buttons">
         <div class="collapse" id="import_export">
          <div class="btn btn-primary" style="font-size: 25px;" onclick="selectImage()">
            <input type="file" id="foto-file" accept="image/png"/>
            Import Image
          </div>
          <button class="btn btn-primary" style="font-size: 25px;" onclick="download()">Export Image</button>
        </div>
       </div>
     </div>
     <div class="breaks">
        <br>
        <br>
      </div>
      <div class="edit">
        <h2 type="button" data-toggle="collapse" data-target="#edit">Editing <span class="drop-down">&#9660;</span></h2>
        <div class="collapse" id="edit">
          <button class="btn btn-primary" style="font-size: 25px;" id="btn" onclick="crop()">Crop Image</button>
          <button class="btn btn-primary" style="font-size: 25px;" id="btn" onclick="flip_img()">Flip Image</button>
          <br><br>
          <button class="btn btn-primary" onclick="makeTransparent()" style="font-size: 25px;" id="btn"><div id="color-preview"></div>Transparent</button>
          <input type="color" id="colorize-color-picker" value="#00000" oninput="makeColorize(this)">
          <button class="btn btn-primary" style="font-size: 25px;" id="btn" onclick="openColorPicker()">Colorize</button>
        </div>
      </div>
   </div>
   <div class="img-container">
     <img id="foto-image" class="image"/>
    </div>
    <script src="https://rawcdn.githack.com/kousik19/foto.js/045defe1a5ce06220e084e4e6f6fbaccb7621841/foto.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

Now let's put some spice in this HTML.

Up next, we will add some CSS.

.sidebar{
  height: 100%;
  width: 400px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(206, 250, 209);
  overflow-x: hidden;
  padding: 20px;
}

.drop-down{
  font-size: 20px;
  float: right;
  position: relative;
  top: 10px;
}

h2{
  user-select: none;
  border: 3px solid rgb(250, 1, 1);
  padding: 5px;
}

br{
  user-select: none;
}

#foto-file{
  display: none;
}

#btn{
  width: 170px;
}

.image{
  position: relative;
  left: 500px;
  user-select: none;
}

#colorize-color-picker{
  display: none;
}

Now that our site is actually, let us make it actually work.

var foto;
window.onload = function() {
  foto = new Foto();
}

function selectImage() {
  document.getElementById('foto-file').click();
}

function grayscale(){
  foto.grayscale();
}

function bright(){
  foto.makeBright();
}

function dark(){
  foto.makeDark();
}

function blur_effect() {
  foto.applyBlurFilter();
}

function emboss() {
  foto.applyEmbossFilter();
}

function sharp() {
  foto.applySharpFilter();
}

function download(){
  foto.export();
}

function flip_img(){
  foto.flipVertically();
}

function crop(){
  foto.cropSelected();
}

function makeTransparent(){
  foto.makeTransparent();
}

function openColorPicker(){
  document.getElementById("colorize-color-picker").click();
}

function makeColorize(elem){
  var color = elem.value;
  foto.applyColorFilter(color);