CamanJS Filter Example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script>
<script src="http://civira.com/cdn/caman-adapter-jquery.js"></script>
<script src="http://civira.com/cdn/image-uris.js"></script>
<script src="http://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.min.js"></script>
<ul>
<li>Home</li>
<li>Tickets</li>
</ul>

CSS

/* Basic CSS Styling */

body {
  text-align: center;
  margin: 0 auto;
}

h1 {
  margin: 10px 0 0 0;
}

canvas {
  margin: 10px 0;
}

.filters button {
  margin: 10px 0;
}

input[type="range"] {
  margin: 0 0 10px 0;
}

.p {
  padding-top: 50px;
  clear: both;
}
.imageMask{
         background-color: #131212;
         opacity:1;
         position: absolute !important;
         left: 85px;
         top: 66px;
         width: 60px;
         height: 60px;
         }
         .imageMask:hover{
         cursor:move;
         }
         #photoContainer{
         width: 299px;
         }
         .blur{
         -webkit-filter: blur(3px);
		 filter: blur(3px);
         opacity:1;
         cursor:default!important;
         }
         .ui-resizable { position: relative;}
         .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
         .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
         .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
         .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
         .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
         .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
         .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
         .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
         .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
         .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}

JavaScript

$(document).ready(function() {

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var undoImg;
  var img = new Image();
loadImage = function(src){

  img.crossOrigin = '';
  img.src = src;

  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
  }
}

  loadImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz6dBOOsFVAeSilVEIO9dqwrY4R5gCzEMcrRVZguhYhr9PVJsThQ");
  var $reset = $('#resetbtn');
  var $autoCorrect = $('#auto');
  var $saveBase64 = $('#saveBase64');
  var $saveImg = $('#saveImg');
  var $toImg = $('#toImg');
  var $base64Img = $('#base64Img');
  var $applyMask = $('#applyMask');
  var $undoMask = $('#undoMask');
  var $canvas = $('.active canvas');

  /* As soon as slider value changes call applyFilters */
  $(document).on('change', 'input[type=range]', function() {
    var bright = parseInt($('#bright').val());
    var cntrst = parseInt($('#contrast').val());
    var gamma = parseInt($('#gamma').val());
    var saturation = parseInt($('#saturation').val());

    Caman('#canvas', img, function() {
      this.revert(false);
      this.brightness(bright).contrast(cntrst).gamma(gamma).saturation(saturation).render();
    });
  });

  /* Creating custom filters */
  Caman.Filter.register("auto", function() {
	this.brightness(10);
    this.contrast(13);
	$("#bright").val(10)
	$("#contrast").val(13)
    this.render();
  });
  $reset.on('click', function(e) {
    $('input[type=range]').val(0);
    Caman('#canvas', img, function() {
     this.revert(false);
     this.render();
    });
  });
  
    $autoCorrect.on('click', function(e) {
    $('input[type=range]').val(0);
    Caman('#canvas', img, function() {
	  this.auto();
      this.render();
    });
  });


  /* You can also save it as a jpg image, extension need to be added later after saving image. */

  $saveBase64.on('click', function(e) {
	var can =...