How to implement responsive background blur?

Question

JavaScript

What we have:

• A rubber block with a rubber image in the background and other elements inside.
• Inside is a smaller block with a fixed width.

What do you need:

• Implement a blurred background for the inner block with a fixed size;
• The source can be any element behind it and the background of the parent element;
• The background must be redrawn when the browser window is resized so that the image does not diverge;
• Support for the latest two versions of modern browsers and IE9+ (IE8 requires a crutch);
• Adequate rendering speed for a blurred background.

What does not fit:

• CSS3 Filter/SVG - blurs content and is not cross-browser friendly;
• blurjs.com is not working as it should and plugin support is slow.

An example of what should happen

Answer 1

Create filter.svg

<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2 2" />
    </filter>
  </defs>
</svg>

Add styles to the block

.block{
    filter: url(filter.svg#blur); /* FF, IE10 & Opera */
   -webkit-filter: blur(2px); /* Chrome */
}

for ie8 add

filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); /* IE8 */

Answer 2

there is an option to upload a picture to canvas in it already do blur.