FarbricJS Filters

by knospe

HTML

<div class="controls">
     <h3>Filters:</h3>

    <p>
        <label>Brightness:</label>
        <br />
        <input type="range" value="0" min="-255" max="255" class="brightness-value" id="brightness-value-1" />
    </p>
</div>
<canvas id="example" width="400" height="400"></canvas>
<img id="image" style="display: none;"...

JavaScript

var $ = function (id) {
    return document.getElementById(id)
};

// Set canvas
var canvas = new fabric.Canvas('example');
canvas.selectionColor = 'rgba(255,0,0,1)';
canvas.selectionBorderColor = 'rgba(255,0,0,0.7)';
canvas.selectionLineWidth = 5;
canvas.backgroundColor = 'rgba(255,255,255,1)';
//canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png');

var f = fabric.Image.filters;

// Add image to the canvas
fabric.Image.fromURL(document.getElementById('image').src, function (img) {
    var canvasCenter = canvas.getCenter();
    var oImg = img.set({
        left: canvasCenter["left"],
        top: canvasCenter["top"],
        angle: 0,
        flipX: false
    });
    canvas.add(oImg).renderAll();
    canvas.setActiveObject(oImg);
});
canvas.renderAll();

function applyFilterBrightness(item_id) {
    // Get the canvas element and filter value
    var el = $('brightness-value-' + item_id);
    var value = parseInt(el.value, 10);
    console.log('value: ' + value);

    // Get element
    //var obj = canvas.item(item_id);
    var obj = canvas.getActiveObject();

    // Add filter
    if (!obj.filters.length) {
        obj.filters.push(new fabric.Image.filters.Brightness({
            brightness: value
        }));
    }
    else {
        obj.filters[0].brightness = value;
    }

    // Apply filters and re-render canvas when done
    obj.applyFilters(canvas.renderAll.bind(canvas));
}


$('brightness-value-1').onchange = function () {
    applyFilterBrightness(1);
};