Использование glfx.js-фильтров в Fabric.js

Question

Я создаю простое приложение для холста, используя Fabric.js. В то время как все выглядит хорошо, меня интересуют некоторые эффекты фильтра, чтобы сделать его немного более прохладным. После некоторых поисков я наткнулся на различные источники. Но меня особенно интересует библиотека glfx.js.

Не удалось найти какой-либо конкретный способ интеграции Fabric.js с glfx.js. Кажется, что glfx.js имеет свои собственные классы холста fx.Canvas, поэтому я немного обеспокоен тем, что интегрировать их невозможно.

Мой вопрос в том, можно ли использовать другие библиотеки, такие как glfx.js с Fabric.js? Потому что я не могу понять, как это сделать.

Если нет, если я использую Fabric.js, мне нужно будет написать собственные фильтры, чтобы получить эти эффекты?

http://evanw.github.io/glfx.js/docs/

Answer 1

Это довольно легко создать новые фильтры в ткани.

Если вы посмотрите на source of Sepia filter, например, вы можете увидеть, что applyTo is responsible для фактической обработки пиксельных пикселей. Когда вызывается applyTo, ему передается элемент холста, представляющий изображение, на которое применяется фильтр. Вы изменяете изображение, изменяя этот соответствующий элемент холста (getImageData -> обработка пикселей ->putImageData).

Но как насчет glfx.js?

Я вижу, что fx.canvas() возвращает вновь созданный холст с уже инициализированным контекстом WebGL. К сожалению, он, похоже, не поддерживает , принимающий уже существующий элемент холста, для работы. Если это так, то мы могли бы сделать это:

... 
applyTo: function(canvasEl) { 
    var fxCanvas = fx.canvas(canvasEl); 
    fxCanvas.ink(0.25).update(); 
} 
... 

Но как он стоит прямо сейчас я не вижу способ интеграции его с тканевыми фильтрами.

Answer 2

Я использую это http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl его быстро его не так гладко, как glfx.js, но я отлично поработаю!

Я использую его как немой из-за изображений небольшого размера, я получаю объект activeObject.getSrc();, затем добавляю его на холст temp, применяя фильтр и добавляю его снова в холст!