Фильтр размытия формы холста html

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


javascript canvas html filter blur
person Justin Bull    schedule 12.08.2010    source источник
comment
Попробуйте вместо этого: pixastic.com/lib/docs/actions/blurfast   -  person Derek 朕會功夫    schedule 08.07.2014
comment
Не беспокойтесь о переходе по любой из этих пиксельных ссылок, похоже, что домен был захвачен, тот, который в вопросе, идет на сайт игры с игровыми автоматами, тот, что в комментарии, - 404   -  person PhysicalEd    schedule 21.08.2020

Ответы (5)


arrow_upward
11
arrow_downward 

myContext.filter = 'blur(10px)';

Свойство CanvasRenderingContext2D.filter Canvas 2D API обеспечивает эффекты фильтрации, такие как размытие или масштабирование серого. Он похож на свойство фильтра CSS и принимает те же функции. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

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

person junvar    schedule 21.08.2018
comment
Хороший ответ, это путь в будущее. - person mfluehr; 24.10.2018

arrow_upward
11
arrow_downward

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

Пример:

canvas.style.webkitFilter = "blur(3px)";

Вы можете снова отменить размытие холста с помощью:

canvas.style.webkitFilter = "blur(0px)";

Это, вероятно, самый быстрый (и самый простой) способ размыть холст - особенно для мобильных устройств.

person Jarrod    schedule 11.02.2013
comment
@ Дэвид, для всех, кроме Edge и Firefox, да. См. Эту диаграмму. - person Luke; 09.05.2016
comment
@Mirabilis Edge в порядке, но с Firefox меньше. Так что я бы не стал заканчивать это предложение словом «да». - person wizzwizz4; 01.08.2016

arrow_upward
8
arrow_downward

Для быстрого размытия, которое почти по Гауссу, я бы рекомендовал StackBlur: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

В качестве альтернативы вы можете использовать это Superfast Box Blur с двумя итерациями: http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

person Quasimondo    schedule 01.03.2011

arrow_upward
2
arrow_downward

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

По умолчанию библиотека pixastic попытается заменить переданный вами узел на созданный ею элемент холста. Чтобы предотвратить это, вы можете включить параметр, чтобы указать, чтобы он оставил узел DOM и включил обратный вызов для самостоятельной обработки возвращенных данных. Что-то вроде этого:

Pixastic.process(canvas, "blur", { leaveDOM: true }, function(img) {
    canvas.getContext('2d').drawImage(img, 0, 0);
});

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

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

ctx.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
ctx.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2, 0, 0, canvas.width, canvas.height);
person Kyle Jones    schedule 12.08.2010
comment
круто, хотя это точно работает, но ведет себя не так, как мне хотелось бы. Мне нужно размыть края так же, как ведет себя размытие по Гауссу. Я думаю, что эта библиотека использует метод размытия рамки. Любые идеи? - person Justin Bull; 13.08.2010
comment
Я как-то упустил из виду ваш второй метод. позвольте мне дать этому шанс. - person Justin Bull; 13.08.2010
comment
у вас бы случайно не было под рукой примера с использованием метода getImageData, не так ли? - person Justin Bull; 13.08.2010

arrow_upward
1
arrow_downward

https://github.com/nodeca/glur - он реализует размытие по Гауссу через фильтр IIR. Смотрите демонстрации.

person Vitaly    schedule 03.11.2015