Вопрос по javascript, canvas – Лучшее размытие холста

8

Это былоспросил раньше, но принятое решение не работает для меня (буквально, в связанной демонстрации у меня ничего не стирается), и это немного помеха, включающая два элемента canvas.

Я в настоящее время использую «бедняков». техника размытия в движении, которая в основном включает в себя повторное перетаскивание исходного изображения на холст и отбрасывание полупрозрачного прямоугольника того же цвета, что и фон сверху, после каждой итерации.

Вот демонстрация:http://jsfiddle.net/YmABP/

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

Есть ли лучшая техника для размытия в движении? В идеале я хотел бы иметь возможность делать что-то вродеcontext.drawImage и передать параметр непрозрачности в, но AFAIK ничего подобного не существует. Некоторые изображения могут быть размещены на сторонних доменах, поэтому у меня не будет доступа к данным отдельных пикселей. Если все сводится к этому, мы можем вытащить изображения на наш сервер, а затем я мог бы перебрать каждый пиксель и нарисовать его в виде полупрозрачного крошечного прямоугольника, но это кажется излишним.

Кто-нибудь знает лучшее решение для размытия в движении, желательно, которое я могу использовать с удаленными изображениями?

Я сомневаюсь, что это имеет значение, но для моих текущих целей все движется только вверх.

Вот чем я в итоге и закончил ... чтобы получить размытие при движении вверх, я начинаю сверху с полностью непрозрачного globalAlpha, а затем рисую изображение на один пиксель ниже на каждой итерации, делая globalAlpha более прозрачным с каждым шагом -jsfiddle.net/zKx66/2 Dagg Nabbit

Ваш Ответ

2   ответа
6

globalAlpha Свойство контекста перед повторным рисованием изображения:

Demo: http://jsfiddle.net/qfEUt/
var img = new Image,
    ctx = document.querySelector('canvas').getContext('2d');
    ctx.globalAlpha = 0.1;

img.onload=function(){
  for (var y=0;y<10;++y) ctx.drawImage(img,0,y);
}
img.src = 'http://phrogz.net/tmp/gkhead-small.png';​
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Dagg Nabbit
0

EaselJS И егоBlurFilter - попробуйте изменить / анимировать размытие в одном направлении (х или у).

Похожие вопросы