Холст Размытие фон

Question

Я новичок относительно холста и я искал и пытался много, но никогда не достигнут, чтобы найти правильное решение, чтобы использовать этот один: http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

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

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

Спасибо!

Answer 1

"Я знаю, что я могу использовать CSS3 фильтры для этого, но он не работает на Firefox ..."

Firefox может сделать CSS размывание:

First, включают в себя файл SVG, содержащий желаемая размытие на веб-странице

<svg xmlns:svg="http://www.w3.org/2000/svg"> 
    <filter id="gaussian"> 
     <feGaussianBlur id="myBlur" stdDeviation="5" /> 
    </filter> 
</svg> 

Далее, получить ссылку на элемент холста обычным способом, например:

var canvas = document.getElementById('myCanvas'); 

... и применить фильтр к нему:

canvas.style.webkitFilter = 'url(#gaussian)'; 
canvas.style.filter = 'url(#gaussian)'; 

Чтобы изменить значение размытия, вам нужен дескриптор Гауссово размывание самого элемента:

var blurFilter = document.getElementById('myBlur'); 

Используйте setStdDeviation (stdDeviationX , stdDeviationY) метод изменения размытия. Оба аргумента числа, а не строки:

blurFilter.setStdDeviation(5, 5); 

(кажется, работает нормально в последних версиях Firefox и Chrome - хотя Chrome не нравится, когда значения размытия устанавливаются на 0 ...)