Фильтр Fabricjs

Question

Фильтр Fabricjs

я сделал код, но всегда получаю эту ошибку «TypeError: (промежуточное значение) (промежуточное значение) .filter не является функцией в i.applyFilters»

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

fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg', function(img) {
  var oImg = img.set({
    left: 50,
    top: 50
  });
  canvas.add(oImg).renderAll();
  canvas.setActiveObject(oImg);
}, {
  crossOrigin: 'anonymous'
});

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

var f = fabric.Image.filters;

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

<canvas width=600 height=400 id="c"></canvas>
<input id="input" type="range" min="-255" max="255" value="0" />

# javascript fabricjs

Vadim Kotov15 апр. 2021, в 10:15

Источник

Поделиться в социальных сетях:

Скопировать адрес страницы:

Ответы 2

Смежные вопросы

melchiar · Answer 1 · 2021-04-16T15-05-33.000Z

Измените эту строку:

obj.applyFilters(canvas.renderAll.bind(canvas));

К

obj.applyFilters();
canvas.renderAll();

Кроме того, фильтр контрастности принимает значения только от -1 до 1 (см. Http://fabricjs.com/docs/fabric.Image.filters.Contrast.html ), поэтому измените эту строку:

<input id="input" type="range" min="-255" max="255" value="0" />

К этому:

<input id="input" type="range" min="-100" max="100" value="0" />

А затем разделите полученное значение на 100.

parseInt(document.getElementById("input").value, 10) / 100

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

fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg', function(img) {
  var oImg = img.set({
    left: 50,
    top: 50
  });
  canvas.add(oImg).renderAll();
  canvas.setActiveObject(oImg);
}, {
  crossOrigin: 'anonymous'
});

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

var f = fabric.Image.filters;

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

<script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>
<canvas width=600 height=400 id="c"></canvas>
<input id="input" type="range" min="-100" max="100" value="0" />

hiam · Answer 2 · 2021-04-16T06-43-19.000Z

за 0 против

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

hiam16 апр. 2021, в 06:43

0

Я отредактировал свой ответ, поскольку применяемые значения фильтра также выходили за пределы допустимого диапазона. Также для подобных комментариев используйте функцию комментариев, а не размещайте ее в качестве ответа. melchiar 16 апр. 2021, в 18:14