Brightness

by rodrigopandini

HTML

<script src="https://raw.github.com/kangax/fabric.js/feature/dynamic_origin/dist/all.min.js"></script>
<script src="http://www.frequency-decoder.com/demo/fd-slider/js/fd-slider.min.js"></script>
<link rel="stylesheet" href="http://www.frequency-decoder.com/demo/fd-slider/css/fd-slider.mhtml.min.css">
<input name="inputBrightness" id="inputBrightness" type="text" title="Brightness" value="0" maxlength="1" />
<br/>
<canvas id="c" width="400" height="400"></canvas>

CSS

canvas{
  border-width: 1px;
  border-style: solid;
  border-color: #000;
}

input{
  width: 400px;
}

JavaScript

var srcImg = "http://fabricjs.com/lib/pug.jpg";

// canvas
var canvas = new fabric.Canvas('c');

// image
fabric.util.loadImage(srcImg, function(img) {
  var object = new fabric.Image(img);
  object.set({ 
    left: 200, 
    top: 200
  });
  object.set("hasRotatingPoint", true);
  object.set("scaleX", .5);
  object.set("scaleY", .5);
  canvas.add(object);
  canvas.renderAll();    
});


fdSlider.createSlider({
  // Associate an input
  inp:document.getElementById("inputBrightness"),
  // Declare a step
  step:0.01, 
  // Declare a maxStep (for keyboard users)
  maxStep:0.01,
  // Min value
  min:0,
  // Max value
  max:1,
  // Use the "tween to click point" animation
  animation:"tween",
  // Force the associated input to have a valid value
  forceValue:true
});

$("#inputBrightness").change(function(){
  console.log(this.value);
});