Размытие изображения перед разрывом на холст

Question

Я пытаюсь добиться размытия Gaussian для изображения, которое я перемещаю на холсте. Есть ли способ размыть изображение перед его рендерингом на холст?

Это изображение не останется неподвижным, и мне придется отображать несколько размеров одного и того же изображения, чтобы я не мог просто размыть исходное изображение.

Любые идеи?

Answer 1

Вы можете легко получить предварительно обработанные, размытые изображения желаемых размеров!

• создать закадровый холст: document.createElement('canvas');

• рисовать изображения в нужные нескольких размерах на закадровый холст: drawImage with sizing parameters

• использовать программу размытия, чтобы размыть весь закадровый холст:

  http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

• использовать закадровый холст как spritesheet и «вырезать» в зависимости от того размера изображения вам нужно, и сделать вырезать изображение на экране холст: снова используя drawImage with sizing parameters