search

msurguy / background-blur

Ultra light cross browser image blurring plugin for jQuery
https://msurguy.github.io/background-blur
964 stars 136 forks source link

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

Open jasomdotnet opened 7 years ago

jasomdotnet commented 7 years ago

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.

msurguy commented 7 years ago

Thanks @jasomdotnet ! I will check out the article as time permits, but if possible, could you make a PR for these issues? I would really appreciate if you can get something together

jasomdotnet commented 7 years ago

"but if possible, could you make a PR for these issues?"

I didn't get this. What is PR? PublicRelations? PRopaganda? :-)

jasomdotnet commented 7 years ago

Code before:

before

  1. Add color-interpolation-filters="sRGB" for removal of color cascade #7
  2. Double the blur value for better blur #6
  3. Add feComponentTransfer for removal of semi-transparent borders #5

Code after:

after

Generally, I recommend you to make background-blur able to generate same svg code as in article mentioned above, because @emilbjorklund, the author, seems to be more sophisticated user then me or you :-) when it comes to svg images.

@emilbjorklund uses also edgeMode="duplicate" or filterUnits="userSpaceOnUse" which I don't know what it does but it can backfire for some users with older browsers (IE8, IE9, IE7...) if omitted.

This is the complete svg code from an article:

`<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">

<image filter="url(#blur)" xlink:href="https://www.example.com/image.jpg" x="0" y="0" height="100%" width="100%"/> `

Jagathishrex commented 6 years ago

how can i implement background, motion and zoom blur in svg without css