5 ms·
Show HN: React component for blurred backgrounds
- antidaily 12y agoI'm not smart enough to know how good the performance is on this. Decent? Better than CSS?
- fitter 12y agoDoes 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?
- javierbyte 12y agoAuthor 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-regarding-ie-10 https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regard... so we must use canvas to be cross-browser.
- spdustin 12y agoYou can. SVG Filters are supported. http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx 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 <img> tag).
- javierbyte 12y agoThank you! I will investigate and compare.
- fitter 12y agoHm, 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.
- spdustin 12y agoI dunno about that. <img> 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... ;)
- amelius 12y agoBut 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?
- javierbyte 12y agoYeah, 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.
- flockflock 12y ago...
- morley 12y agoNice 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 either not use it, or use it incorrectly. Instead, since you're using ES6, I suggest using the fat arrow: this.img.onload = () => { stackBlurImage(this.img, this.canvas, blurRadius, this.width, this.height); }; (I'm used to writing Coffeescript instead of ES6, so sorry if minor syntax details are wrong.) This is largely a stylistic choice. You can feel free to do things however you want, and if it works, it works. But generally I prefer to make sure things are really clear, and that the Javascript features aren't obscured.
- simplify 12y ago> 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.
- lfuller 12y agoBy 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".
- untilHellbanned 12y agoThanks for the contribution! Minor point: It would be nice if the demo's slider would be draggable on mobile, iOS Safari can't see it in action.
- javierbyte 12y agoSure! Fixing right now.
- WhitneyLand 12y agoNice 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.
- escusado 12y agoEaaaa el niño! :D