A Simple Image Editor Using p5.js and jQuery

ImageEditor is an online editor that allows you to apply color filters to images on the client side.

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

How to make use of it:

1. Load the required JavaScript and CSS information within the doc.

<-- 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 picture 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>

Adjust The Hue Of An Image, image-editor Plugin/Github, how to change png image color on hover using css


See Demo And Download

Official Website(drophy): Click Here

This superior jQuery/javascript plugin is developed by drophy. For extra Advanced usage, please go to the official website.

Share