HTML-фильтр формы размытия холста

Question

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

Answer 1

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

Пример:

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

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

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

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

Answer 2

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

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

Answer 3

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

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

он все еще экспериментальный, но поддерживается chrome & firefox atm.

Answer 4

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

По умолчанию библиотека pixastic пытается заменить узел, который вы передаете, на элемент canvas, который он создает. Чтобы этого не происходило, вы можете включить опцию, чтобы указать, чтобы покинуть узел 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);

Answer 5

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