Фильтр очистки, который вы нашли, на самом деле не является фильтром для очистки. Как видно из кода, он убивает зеленый и синий канал и оставляет вас только с красными изображениями. Это не тот эффект, который вы могли бы применить к красному красителю.
Вы можете создать bluify и greenify фильтр таким же образом, только изменяя выжившего Channell:
fabric.Image.filters.Greenify= fabric.util.createClass({
type: 'greenify',
applyTo: function(canvasEl) {
var context = canvasEl.getContext('2d'),
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
data = imageData.data;
for (var i = 0, len = data.length; i < len; i += 4) {
//kill red
data[i] = 0;
//kill blue
data[i + 2] = 0;
}
context.putImageData(imageData, 0, 0);
}
});
Чтобы создать colorify фильтр, сначала вы должны знать, как это сделать. Я лично проверил, как colorify фильтр из GIMP работает:
https://docs.gimp.org/en/plug-in-colorify.html
1) сделать черно-белое изображение, основанное на светимость
2) умножить уровень серого для цвета вы хотите
Это будет быть более или менее равным применять существующие фильтры fabricjs в порядке оттенков серого и Multiply.
var canvas = new fabric.Canvas("c");
fabric.Image.filters.Luminosity = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Luminosity.prototype */ {
/**
* Filter type
* @param {String} type
* @default
*/
type: 'Luminosity',
/**
* Applies filter to canvas element
* @memberOf fabric.Image.filters.Grayscale.prototype
* @param {Object} canvasEl Canvas element to apply filter to
*/
applyTo: function(canvasEl) {
var context = canvasEl.getContext('2d'),
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
data = imageData.data,
len = imageData.width * imageData.height * 4,
index = 0,
average;
while (index < len) {
//Luminosity = 0.21 × R + 0.72 × G + 0.07 × B
average = (0.21 * data[index] + 0.72 * data[index + 1] + 0.07 * data[index + 2]);
data[index] = average;
data[index + 1] = average;
data[index + 2] = average;
index += 4;
}
context.putImageData(imageData, 0, 0);
}
});
/**
* Returns filter instance from an object representation
* @static
* @return {fabric.Image.filters.Grayscale} Instance of fabric.Image.filters.Grayscale
*/
fabric.Image.filters.Grayscale.fromObject = function() {
return new fabric.Image.filters.Grayscale();
};
fabric.Image.fromURL("http://fabricjs.com/assets/pug.jpg", function(img) {
img.filters.push(new fabric.Image.filters.Grayscale());
img.filters.push(new fabric.Image.filters.Multiply({color: '#F0F'}));
img.scale(0.3);
img.applyFilters(function() {
canvas.add(img);
});
}, {crossOrigin: 'Anonymous'});
fabric.Image.fromURL("http://fabricjs.com/assets/pug.jpg", function(img) {
img.filters.push(new fabric.Image.filters.Luminosity());
img.filters.push(new fabric.Image.filters.Multiply({color: '#F0F'}));
img.applyFilters(function() {
img.scale(0.3);
img.left = img.getWidth();
canvas.add(img);
});
}, {crossOrigin: 'Anonymous'});
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas width="500" height="400" id="c" ></canvas>
Для сравнения встроенных функций fabricjs с примером из садомазо, я создал Luminosity фильтр, чтобы использовать вместо градаций серого фильтра, который основан на «Среднее значение» метода. Как вы видите, результаты довольно похожи, но они зависят от изображения.
Проверьте исходный код фильтра Multiply, чтобы узнать, как обрабатывается параметр в фильтре, если вы хотите создать собственный фильтр.
Вы хотите пройти цвет и что вы хотите сделать с этим цветом? – AndreaBogazzi
@AndreaBogazzi, я создам новый цветовой фильтр – gambler
@AndreaBogazzi, у меня есть требование как создать настраиваемый фильтр на основе цветового кода – gambler