Adjust The Hue Of An Image - Image Editor

An online image editor that allows you to apply color filters to images on the client side.

It is built on top of jQuery and p5.js JavaScript libraries and can be used to adjust the hue of an image by dragging the RED/GREEN/BLUE/BRIGHTNESS sliders.

It also comes with 3 presets (Greyscale, Black & White, and Single Color) that help you quickly create Monochrome / Monotone images online.

How to use it:

1. Load the required JavaScript and CSS files in the document.

<-- Core Stylesheet -->
<link rel="stylesheet" href="css/style.css" />

<-- P5.js -->
<script src="/path/to/cdn/p5.min.js"></script>

<-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<-- Core JavaScript -->
<script src="js/main.js"></script>

2. Build the HTML for the image editor.

<div id="fullpage-container">
  
  <!-- LEFT SIDE -->
  <div id="left-container">
      <h1>Image Editor</h1>
      <div id="canvas-container">
          <!-- p5 canvas will go here -->
      </div>
      <div id="dropzone">Upload image</div>
      <button id="download-button">Download</button>
  </div>

  <!-- RIGHT SIDE -->
  <div id="right-container">
      <div id="slider-container">
          <div id="red-slider-container">
              <p>Red</p>
          </div>
          <div id="green-slider-container">
              <p>Green</p>
          </div>
          <div id="blue-slider-container">
              <p>Blue</p>
          </div>
          <div id="bright-slider-container">
              <p>Brightness</p>
          </div>
          <div id="preset-button-row" class="button-row">
              <button class="square-button selected" data-preset="none">None</button>
              <button class="square-button" data-preset="grey">Grayscale</button>
              <button class="square-button" data-preset="bw">Black & White</button>
              <button class="square-button" data-preset="sc">Single color</button>
          </div>
          <div id="extra-settings">
              <p>Color</p>
              <div id="current-color"></div>
              <p>Tolerance</p>
              <input type="range" id="tolerance" min=0 max=300 value=10>
          </div>
      </div>
  </div>

</div>

3. Add a local image to the image editor via drag'n'drop and start editing. That's it.

---

This awesome jQuery plugin is developed by drophy. For more Advanced Usages, please check the demo page or visit the official website.