msurguy/background-blur

Ultra light cross browser image blurring plugin for jQuery

Hi there 👋

I'm Maks. I am a design technologist, creative coder, innovator and web developer with wide range of experience. You can learn a lot about me from my website: https://maxoffsky.com

In my spare time I build community of drawing robot enthusiasts and make tools for 2D CNC machines like:

• https://msurguy.github.io/rad-lines/
• https://msurguy.github.io/flow-lines/
• https://msurguy.github.io/cnc-text-tool/
• https://msurguy.github.io/SquiggleCam/

Previously, I created Bootsnipp and dozens of Laravel-powered websites. I also wrote two e-books: Integrating front-end components with web applications and Laravel: my first framework

You can follow me on Twitter where I post dev / design related, inspiring content: https://twitter.com/msurguy

I'd appreciate if you could sponsor my open source work: https://github.com/sponsors/msurguy

background-blur's Issues

Invalid value for <svg> in Safari browser

Background blur is not getting applied in the safari browser. All other browser's it was working fine.

Safari browser version: 11.1.1

I am getting an error in the console as

Error: Invalid value for <svg> attribute y=" 0px"

Any idea about this issue ?

Strange 'color cascade' when applying blur to image

When applying this blur technique on picture I see some strange 'color cascade':

When I create blurred svg image using this technique, it's perfect. Why?

I think, it's because 2nd method blurs image proportionally in opposite to 1th method (your one) which blurs image depending on screensize.

Blur the image proportionally and then style it to element background like this

background: #ccc url('img.jpg') repeat fixed center center / cover;

--
Update:
It's because <filter> miss color-interpolation-filters tag set to sRGB:
<filter id="blur" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
My general advice regarding also issues #6 #5 sounds "do svg code like this":

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="1500" height="823"
     viewBox="0 0 1500 823">
  <filter id="blur" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="20 20" edgeMode="duplicate" />
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="1 1" />
    </feComponentTransfer>
  </filter>
  <image filter="url(#blur)" xlink:href="https://github.com/some/image.jpg" x="0" y="0" height="100%" width="100%"/>
</svg>

source + read this article

Remove semi-transparent edges get when applying the gaussian blur with 'feComponentTransfer'

Add 'feComponentTransfer' into svg filter in order to remove semi-transparent edges:

  <filter id="blur" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="20 20" edgeMode="duplicate" />
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="1 1" />
    </feComponentTransfer>
  </filter>

Now you fix it by this:

/* Add this CSS to remove transparent border around the image */
left: -10%;
width: 120%;

See this article.

Possibility to choose width 100% for responsive design?

The only problem I found is that when your resize the screen, the blured svg do not change size. Not a problem if you go from larger to smaller but the other way let a big empty space...
I changed the width of the SVG to "100%" and it's better, even if the ratio is not good, at least it's not empty...
Any idea there to keep the aspect ratio?

Add double blur value into 'feGaussianBlur'

You have something like this, now:
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
Double the 'stdDeviation' value like this. You get better blur effect:
<feGaussianBlur in="SourceGraphic" stdDeviation="10 10"/>

See this svg source code.

Apply on css background image?

Is it possible to use background-blur to blur the background image of a div?
This background image is specified in the CSS or in the inline style...
So do we need absolutely to use imageURL in the javascript?