CodePen Embed - CamanJS Image Editor

Live

 
<div class="preview-wrapper">
  <canvas id="canvas"></canvas>
</div>
<div class="filter-buttons">
  <div class="filter-group">
    <button id="brightness-dec">-</button>
    <span class="filter-name">Brightness</span>
    <button id="brightness-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="contrast-dec">-</button>
    <span class="filter-name">Contrast</span>
    <button id="contrast-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="saturation-dec">-</button>
    <span class="filter-name">Saturation</span>
    <button id="saturation-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="vibrance-dec">-</button>
    <span class="filter-name">Vibrance</span>
    <button id="vibrance-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="exposure-dec">-</button>
    <span class="filter-name">Exposure</span>
    <button id="exposure-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="noise-dec" class="disabled">-</button>
    <span class="filter-name">Noise</span>
    <button id="noise-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="sharpen-dec" class="disabled">-</button>
    <span class="filter-name">Sharpen</span>
    <button id="sharpen-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="sepia-dec" class="disabled">-</button>
    <span class="filter-name">Sepia</span>
    <button id="sepia-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="hue-dec" class="disabled">-</button>
    <span class="filter-name">Hue</span>
    <button id="hue-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="blur-dec" class="disabled">-</button>
    <span class="filter-name">Blur</span>
    <button id="blur-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="gamma-dec" class="disabled">-</button>
    <span class="filter-name">Gamma</span>
    <button id="gamma-inc">+</button>
  </div>
  <div class="filter-group">
    <button id="clip-dec" class="disabled">-</button>
    <span class="filter-name">Clip</span>
    <button id="clip-inc">+</button>
  </div>
</div>
<div class="editor-buttons">
  <input type="file" id="upload-file" placeholder="Upload a Picture" />
  <label for="upload-file">Upload a Picture</label>
  <button id="download-btn">Download Image</button>
  <br/>
  <button id="vintage-btn">Vintage</button>
  <button id="lomo-btn">Lomo</button>
  <button id="clarity-btn">Clarity</button>
  <button id="sincity-btn">Sin City</button>
  <button id="crossprocess-btn">Cross Process</button>
  <button id="pinhole-btn">Pinhole</button>
  <button id="nostalgia-btn">Nostalgia</button>
  <button id="majestic-btn">Her Majesty</button>
</div>

Live

​x
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}
​
.filter-name {
  background: #795548;
  padding: 2px;
  display: inline-block;
  color: white;
  width: 100px;
  border-radius: 3px;
  text-align: center;
}
​
.filter-group {
  display: inline-block;
  margin: 5px 15px;
}
​
body {
  text-align: center;
  margin: 20px auto;
  font-family: "Lato";
}
​
h1 {
  margin: 10px 0 0 0;
  font-size: 2em;
}
​
canvas {
  margin-bottom: 40px;
  background: #ececec;
  width: 600px;
  max-width: 100%;
}
​
.filter-buttons button,
.editor-buttons button {
  margin: 4px;
  background: black;
  border: none;
  color: white;
  font-family: "Lato";
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 1em;
}
​
.filter-buttons button.disabled {
  background: #aaa;
}
​
.filter-buttons button {
  padding: 2px 10px;
  margin: 0;
  cursor: pointer;
  background: #ff5722;
}
​
.editor-buttons #reset-btn {
  background: #f44336;
}
​
.editor-buttons #download-btn {
  background: #009688;
}
​
.editor-buttons button:hover {
  background: #795548;
  cursor: pointer;
}
​
.editor-buttons {
  display: inline-block;
  margin-top: 10px;
}
​
[type="file"] {
  display: none;
}
​
[type="file"] + label {
  margin: 10px 4px;
  background: #673ab7;
  border: none;
  color: white;
  cursor: pointer;
  font-family: "Lato";
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
}
​
[type="file"] + label:hover {
  background: #3399ff;
}
​

Live

xxxxxxxxxx
 
var img = new Image();
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var fileName = "";
​
$(document).ready(function() {
  $("#brightness-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.brightness(10).render();
    });
  });
​
  $("#brightness-dec").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.brightness(-10).render();
    });
  });
​
  $("#contrast-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.contrast(10).render();
    });
  });
​
  $("#contrast-dec").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.contrast(-10).render();
    });
  });
​
  $("#saturation-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.saturation(10).render();
    });
  });
​
  $("#saturation-dec").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.saturation(-10).render();
    });
  });
​
  $("#vibrance-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.vibrance(10).render();
    });
  });
​
  $("#vibrance-dec").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.vibrance(-10).render();
    });
  });
​
  $("#exposure-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.exposure(10).render();
    });
  });
​
  $("#exposure-dec").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.exposure(-10).render();
    });
  });
​
  $("#noise-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.noise(10).render();
    });
  });
​
  $("#sharpen-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.sharpen(10).render();
    });
  });
​
  $("#sepia-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.sepia(20).render();
    });
  });
​
  $("#hue-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.hue(10).render();
    });
  });
​
  $("#blur-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.stackBlur(5).render();
    });
  });
​
  $("#gamma-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.gamma(0.1).render();
    });
  });
​
  $("#clip-inc").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.clip(10).render();
    });
  });
​
  $("#vintage-btn").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.vintage().render();
    });
  });
​
  $("#lomo-btn").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.lomo().render();
    });
  });
​
  $("#calrity-btn").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.clarity().render();
    });
  });
​
  $("#sincity-btn").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.sinCity().render();
    });
  });
​
  $("#crossprocess-btn").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.crossProcess().render();
    });
  });
​
  $("#pinhole-btn").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.pinhole().render();
    });
  });
​
  $("#nostalgia-btn").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.nostalgia().render();
    });
  });
​
  $("#majestic-btn").on("click", function(e) {
    Caman("#canvas", img, function() {
      this.herMajesty().render();
    });
  });
​
  $("#download-btn").on("click", function(e) {
    var fileExtension = fileName.slice(-4);
    if (fileExtension == ".jpg" || fileExtension == ".png") {
      var actualName = fileName.substring(0, fileName.length - 4);
    }
    download(canvas, actualName + "-edited.jpg");
  });
​
  $("#upload-file").on("change", function() {
    var file = document.querySelector("#upload-file").files[0];
    var reader = new FileReader();
​
    if (file) {
      fileName = file.name;
      reader.readAsDataURL(file);
    }
​
    reader.addEventListener(
      "load",
      function() {
        img = new Image();
        img.src = reader.result;
        img.onload = function() {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0, img.width, img.height);
          $("#canvas").removeAttr("data-caman-id");
        };
      },
      false
    );
  });
});
​
function download(canvas, filename) {
  var e;
  var lnk = document.createElement("a");
​
  lnk.download = filename;
​
  lnk.href = canvas.toDataURL("image/jpeg", 0.8);
​
  if (document.createEvent) {
    e = document.createEvent("MouseEvents");
    e.initMouseEvent(
      "click",
      true,
      true,
      window,
      0,
      0,
      0,
      0,
      0,
      false,
      false,
      false,
      false,
      0,
      null
    );
    lnk.dispatchEvent(e);
  } else if (lnk.fireEvent) {
    lnk.fireEvent("onclick");
  }
}
​

This Pen is owned by Envato Tuts+ on CodePen. It is a fork of this Pen.

See more by @tutsplus on CodePen

External CSS

https://fonts.googleapis.com/css?family=Lato

External CSS

External JavaScript