如何使用fabric.js设置对比度和饱和度 [英] how to set contrast and saturation using fabric.js

问题描述

我想在图像编辑器中设置对比度，饱和度和色调。对于这个我使用fabric.js，但它只有亮度选项..

I want to set contrast, saturation and hue in my image editor. for this i use fabric.js but it have only brightness option..

这是我的面料js代码

(function() {

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

  function applyFilter(index, filter) {
    console.log(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('../lib/bg.png', function(img) {
    canvas.backgroundImage = img;
   canvas.backgroundImage.width = 400;
  canvas.backgroundImage.height = 400;
  });


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

    var filters = ['brightness',];
 //         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];
      }

      applyFilter(5, true   && new f.Brightness({
      brightness: parseInt($('brightness-value').value, 10)
    }));



    },
    'selection:cleared': function() {
      fabric.util.toArray(document.getElementsByTagName('input'))
                      .forEach(function(el){ el.disabled = true; })
    }
   });

   fabric.Image.fromURL('../upload/Chrysanthemum.jpg', function(img) {
    var oImg = img.set({ left: 50, top: 100, angle: 0 }).scale(0.9);
   canvas.add(oImg).renderAll();
   canvas.setActiveObject(oImg);
  });
 $('brightness').onclick = function () {
   applyFilter(5, this.checked && new f.Brightness({
    brightness: parseInt($('brightness-value').value, 10)
   }));
   };
    $('brightness-value').onchange = function() {
    applyFilterValue(5, 'brightness', parseInt(this.value, 10));
  };

 })();

推荐答案

现在可以使用最新的Fabricjs版本执行此操作， 1.6.6

You can now do this with the latest Fabricjs release, 1.6.6

fabric.Image.filters.Contrast 和 fabric.Image.filters .Saturate 已在此版本中添加。

fabric.Image.filters.Contrast and fabric.Image.filters.Saturate were added in this release.

我向你展示了如何实现它（注意：更改 applyFilter（）函数实现不同的过滤器）：

I made a fiddle to show you how to achieve it (note: change the applyFilter() function to achieve different filters):

DEMO

这篇关于如何使用fabric.js设置对比度和饱和度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！