JS image editor

JS image editor https://www.geeksforgeeks.org/creating-a-simple-image-editor-using-javascript/ http://jsfiddle.net/wttAu/2/

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<div class="container">

  <!--
  
  https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
  <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="">
  
  
  -->

  <nav class="green">
    <div class="nav-wrapper container">
      <span class="nav-header">
        Simple Image Filters
      </span>
      <ul class="right image-save">
        <button class="btn btn-flat blue white-text" onclick="saveImage()">
          Save
        </button>
        <button class="btn btn-flat red white-text" onclick="resetImage()">
          Reset
        </button>
        <button class="btn btn-flat red white-text" onclick="cropImg(150,150)">
          Crop
        </button>
      </ul>
    </div>
  </nav>

  <!-- Hidden image that will be used for
    holding the source image -->
  <img id="sourceImage" crossorigin="anonymous">

  <div class="image-preview">

    <!-- Canvas that will hold the 
        image to be edited -->
    <canvas id="canvas" height="0"></canvas>
  </div>
  <div class="container app">

    <!-- Text to be shown at the beginning
        of the application -->
    <div class="help-text center-align">
      <h5>Please Upload an Image to Start Editing</h5>
    </div>

    <!-- All the image controls that will be
        used for modifying the image -->
    <div class="image-controls">
      <h6>Image Controls</h6>
      <div class="row">
        <div class="col s6">
          <span class="range-field">
            <label...

CSS

html,body {
  color: #454545;
}

.container {
  margin-top: 1%;
}

.nav-header {
    font-size: 1.5rem;
}
  
.row {
    margin-bottom: 0;
}
  
#sourceImage,
.image-controls,
.image-save,
.preset-filters {
    display: none;
}
  
.image-preview {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
  
#canvas {
    max-height: 420px;
    object-fit: contain;
}

JavaScript

// Get the source image to be edited
let image = document.getElementById('sourceImage');

// Get the canvas for the edited image
let canvas = document.getElementById('canvas');

// Get the 2D context of the image
let context = canvas.getContext('2d');

// Get all the sliders of the image
let brightnessSlider = document.getElementById("brightnessSlider");
let contrastSlider = document.getElementById("contrastSlider");
let grayscaleSlider = document.getElementById("grayscaleSlider");
let hueRotateSlider = document.getElementById("hueRotateSlider");
let saturateSlider = document.getElementById("saturationSlider");
let sepiaSlider = document.getElementById("sepiaSlider");

function uploadImage(event) {

  // Set the source of the image from the uploaded file
  image.src = URL.createObjectURL(event.target.files[0]);

  image.onload = function() {
    // Set the canvas the same width and height of the image
    canvas.width = this.width;
    canvas.height = this.height;
    canvas.crossOrigin = "anonymous";
    applyFilter();
  };

  // Show the image editor controls and hide the help text
  document.querySelector('.help-text').style.display = "none";
  document.querySelector('.image-save').style.display = "block";
  document.querySelector('.image-controls').style.display = "block";
  document.querySelector('.preset-filters').style.display = "block";

  // This function is used to update the image
  document.querySelector('.help-text').style.display = "none";
  document.querySelector('.image-save').style.display = "block";
  document.querySelector('.image-controls').style.display = "block";
  document.querySelector('.preset-filters').style.display = "block";
}


// This function is used to update the image
// along with all the filter values
function applyFilter() {

  // Create a string that will contain all the filters
  // to be used for the image
  let filterString =
    "brightness(" + brightnessSlider.value + "%" +
    ") contrast(" + contrastSlider.value + "%"...