Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: React component for blurred backgrounds

github.com

Post reply on HN
Print view View original

11–18 of 18 posts

Re: Show HN: React component for blurred backgrounds

#11

Post by spdustin »

fitter wrote: post #8
spdustin wrote: post #6

Earlier quoted context omitted.

You can. SVG Filters are supported. http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-eff... Edit: to clarify, the image would need to be moved into the SVG (which could be a simple DOM manipulation of the original tag).

Hm, if that's the case, then theoretically this component can be easily improved to support any DOM container (not just images) by just polyfilling filter: with native or SVG.

I dunno about that. has a pretty direct analog in SVG that you could create by adding it (and the SVG container) to the DOM in script. Arbitrary markup would probably be best to render into a canvas.

Of course, you could always just force IE9 mode... ;)

Re: Show HN: React component for blurred backgrounds

#12

Post by WhitneyLand »

Nice work.

Suggestion: Add support for frosted glass since it's an easy extension.

You would only need another parameter for an RGBA color for "tint". Then draw over the blurred area with this color.

For example, setting tint to rgba(255,255,255,0.15) will look like the iOS style frosted effect. Varying the rgb and alpha can show other interesting options.

Re: Show HN: React component for blurred backgrounds

#13

Post by simplify »

morley wrote: post #9

Nice work! I noticed that you're caching `this` as a variable: var Blur = this, And it looks like you're doing so to avoid scope problems in anonymous functions: Blur.img.onload = function(){ stackBlurImage( Blur.img, Blur.canvas, blurRadius, Blur.width, Blur.height) }; I personally don't like this style. It makes it harder to read the code. If someone misses that `var Blur = this` line, they could get confused and e…

> It makes it harder to read the code

I think it makes it much easier to read the code. Assigning it to a variable gives a nice, short description of what you're actually working with.

Re: Show HN: React component for blurred backgrounds

#15

Post by lfuller »

simplify wrote: post #13
morley wrote: post #9

Nice work! I noticed that you're caching `this` as a variable: var Blur = this, And it looks like you're doing so to avoid scope problems in anonymous functions: Blur.img.onload = function(){ stackBlurImage( Blur.img, Blur.canvas, blurRadius, Blur.width, Blur.height) }; I personally don't like this style. It makes it harder to read the code. If someone misses that `var Blur = this` line, they could get confused and e…

> It makes it harder to read the code I think it makes it much easier to read the code. Assigning it to a variable gives a nice, short description of what you're actually working with.

By using arrow functions it's simply implied that the top level context is always being used. You don't have to define what "this" is, since it's always "this".

Re: Show HN: React component for blurred backgrounds

#16

Post by amelius »

javierbyte wrote: post #4
fitter wrote: post #3

Does this need to be a canvas-scribbling React component when you can do this with better performance using a couple of lines of CSS filters? Is there some advantage I'm missing?

Author here. As far as I know there is no way to do blur with CSS in IE10+ https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regard... so we must use canvas to be cross-browser.

But why write this as a React component, when a plain javascript implementation would do fine (in view of compatibility with existing code, which may not be using React)? Am I missing something?

Re: Show HN: React component for blurred backgrounds

#18

Post by javierbyte »

amelius wrote: post #16
javierbyte wrote: post #4

Earlier quoted context omitted.

Author here. As far as I know there is no way to do blur with CSS in IE10+ https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regard... so we must use canvas to be cross-browser.

But why write this as a React component, when a plain javascript implementation would do fine (in view of compatibility with existing code, which may not be using React)? Am I missing something?

Yeah, I was also thinking in create a non-react version, but a separate react version would still be needed since we are doing DOM manipulation.
Post reply on HN