Есть ли способ добиться эффекта Photoshop, как умножения, различий и т. Д. С помощью Canvas?

Question

Я ищу способ достижения эффектов слоя типа Photoshop, таких как умножение и разность (и экран) для Canvas + JavaScript.

Кроме того, есть ли эффект размытия для Canvas?

Answer 1

( Предполагая, по крайней мере, некоторое знакомство с обработкой изображений здесь. Если это не так, вы можете уточнить свой вопрос или задать другой вопрос с более узкой областью. )

Те,эффекты слоя не так сложно достичь. В Википедии есть описания того, как они работают , а также несколько указателей.Например, для , умноженного на , вы умножаете значения на канал и на пиксель и делите результат на 255.

Что касается размытия, то обычно это делается простой сверткой .См. Например, Википедия снова .По сути, при свертывании сигнала вы должны смотреть на окрестность одного пикселя с разным весом (для размытия по Гауссу эти веса образуют форму нормального распределения в 2D).Простое размытие рамки может использовать матрицу

1 1 1
1 1 1
1 1 1

, которая будет просто размыть каждый пиксель непосредственно окружающими его.Выполните это три раза на изображении, и вы получите хорошее приближение к размытию по Гауссу.