как реализовать черно-белый фильтр в документе с помощью fabricjs

Question

Как я могу использовать fabri cjs или любую другую js библиотеку для применения черно-белого фильтра к документу, чтобы получить следующие результаты?

входное изображение

ожидаемый результат

входное изображение

ожидаемый результат

Answer 1

Вот решение: http://jsfiddle.net/qasLmxvh/1/

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

$('.select_image').change(function (e) {
        loadImage(e.target.files[0]);
    });
    is_grayscale = true;
function loadImage(src) {

    if (!src.type.match(/image.*/)) {
        console.log("The dropped file is not an image: ", src.type);
        return;
    }

    let reader = new FileReader();
    reader.onload = function (e) {
        let imgObj = new Image();
        imgObj.src = e.target.result;
        imgObj.onload = function () {
        let scale = 300 / Math.max(imgObj.naturalWidth, imgObj.naturalHeight);
            let img = new fabric.Image(imgObj, {
                left: 10,
                top: 10,
                scaleX: scale,
                scaleY: scale
            });
            canvas.add(img);
               toGrey();
               img.diry=1;
            canvas.renderAll();
            
            
        };
    };
    reader.readAsDataURL(src);
}
function toGrey() {
    let grayscale = new fabric.Image.filters.Grayscale();
    canvas.getObjects().forEach(function (t) {
      if (t.hasOwnProperty('filters')) {
        if (is_grayscale) {
          t.filters.push(grayscale);
        } else {
          t.filters.length = 0;
        }
        t.applyFilters(canvas.renderAll.bind(canvas));
      } else if (t.hasOwnProperty('fill')) {
        let color_sum = t.fill
        .match(/\d+,\d+,\d+/)[0]
        .split(',')
        .map((i) => parseInt(i))
        .reduce((a, b) => a + b, 0);

        let gray = color_sum / 3;

        t.setColor(to_rgba({r: gray, g: gray, b: gray, a: 1}));
      }
    });
    applyFilter(1, new f.Contrast({
      contrast: 255
    }));
    canvas.renderAll();
}
function applyFilter(index, filter) {
  var obj = canvas.getObjects()[0];
  obj.filters[index] = filter;
  obj.applyFilters(canvas.renderAll.bind(canvas));
}

var f = fabric.Image.filters;

document.getElementById("input").onchange = function() {
  applyFilter(1, new f.Contrast({
    contrast: parseInt(document.getElementById("input").value,10)
  }));
};

В основном я применил эффект оттенков серого, а затем эффект контраста. введите описание изображения здесь