JSFiddle - React, Tailwind, and code Playground

by irina_dfy

HTML

<div id="bd-wrapper" ng-controller="CanvasControls">
      <h2><span>Fabric.js demos</span> &middot; Image Filters</h2>



<canvas id="c" width="600" height="600"></canvas>
<div class="controls">
  <h3>Filters:</h3>
  <p>
    <label><span>Grayscale:</span> <input type="checkbox" id="grayscale" disabled></label>
  </p>
  <p>
    <label><span>Invert:</span> <input type="checkbox" id="invert" disabled></label>
  </p>
  <p>
    <label><span>Sepia:</span> <input type="checkbox" id="sepia" disabled></label>
  </p>
  <p>
    <label><span>Sepia2:</span> <input type="checkbox" id="sepia2" disabled></label>
  </p>
  <p>
    <label><span>Remove white:</span> <input type="checkbox" id="remove-white" disabled></label>
    <br>
    <label>Threshold: <input type="range" id="remove-white-threshold" value="60" min="0" max="255" disabled></label>
    <br>
    <label>Distance: <input type="range" id="remove-white-distance" value="10" min="0" max="255" disabled></label>
  </p>
  <p>
    <label><span>Brightness:</span> <input type="checkbox" id="brightness" disabled></label>
    <br>
    <label>Value: <input type="range" id="brightness-value" value="100" min="0" max="255" disabled></label>
  </p>
  <p>
    <label><span>Noise:</span> <input type="checkbox" id="noise" disabled></label>
    <br>
    <label>Value: <input type="range" id="noise-value" value="100" min="0" max="1000" disabled></label>
  </p>
  <p>
    <label><span>GradientTransparency:</span> <input type="checkbox" id="gradient-transparency" disabled></label>
    <br>
    <label>Value: <input type="range" id="gradient-transparency-value" value="100" min="0" max="255" disabled></label>
  </p>
  <p>
    <label><span>Pixelate</span> <input type="checkbox" id="pixelate" disabled></label>
    <br>
    <label>Value: <input type="range" id="pixelate-value" value="4" min="2" max="20" disabled></label>
  </p>
  <p>
    <label><span>Blur:</span> <input type="checkbox" id="blur" disabled></label>
  </p>
  <p>
   ...

CSS

.controls { display: inline-block; background: #fafafa; margin-left: 10px; padding: 15px; border-left: 1px dotted #aaa; }
  .canvas-container { display: inline-block; vertical-align: top; }
  input[disabled] { opacity: 0.5; }
  #bd-wrapper { min-width: 1600px; }

JavaScript

(function() {
  fabric.Object.prototype.transparentCorners = false;
  var $ = function(id){return document.getElementById(id)};

  function applyFilter(index, filter) {
    var obj = canvas.getActiveObject();
    obj.filters[index] = filter;
    obj.applyFilters(canvas.renderAll.bind(canvas));
  }

  function applyFilterValue(index, prop, value) {
    var obj = canvas.getActiveObject();
    if (obj.filters[index]) {
      obj.filters[index][prop] = value;
      obj.applyFilters(canvas.renderAll.bind(canvas));
    }
  }

  fabric.Object.prototype.padding = 5;
  fabric.Object.prototype.transparentCorners = false;

  var canvas = this.__canvas = new fabric.Canvas('c'),
      f = fabric.Image.filters;

  fabric.Image.fromURL('http://fabricjs.com/lib/bg.png', function(img) {
    canvas.backgroundImage = img;
    canvas.backgroundImage.width = 600;
    canvas.backgroundImage.height = 600;
  });


  canvas.on({
    'object:selected': function() {
      fabric.util.toArray(document.getElementsByTagName('input'))
                          .forEach(function(el){ el.disabled = false; })

      var filters = ['grayscale', 'invert', 'remove-white', 'sepia', 'sepia2',
                      'brightness', 'noise', 'gradient-transparency', 'pixelate',
                      'blur', 'sharpen', 'emboss', 'tint', 'multiply', 'blend'];

      for (var i = 0; i < filters.length; i++) {
        $(filters[i]).checked = !!canvas.getActiveObject().filters[i];
      }
    },
    'selection:cleared': function() {
      fabric.util.toArray(document.getElementsByTagName('input'))
                          .forEach(function(el){ el.disabled = true; })
    }
  });

  fabric.Image.fromURL('http://fabricjs.com/assets/printio.png', function(img) {
    var oImg = img.set({ left: 50, top: 100, angle: -15 }).scale(0.9);
    canvas.add(oImg).renderAll();
    canvas.setActiveObject(oImg);
  });

  $('grayscale').onclick = function() {
    applyFilter(0, this.checked && new f.Grayscale());
  };
 ...