1

This might be confusing, so let me explain.

I have a page with one giant image on it:

+-------------+
|             |
|             |
| image       |
|             |
|             |
+-------------+

On this page, I'm trying to overlay content with the background as a blurred version of the image below.

+-------------+
| image       |
|             |
| +-+ +-+     |
| |b| |b|     |
| +-+ +-+     |
+-------------+

I'm currently doing this by adding a div inside the content that has a background image inversely positioned where the div is. This image is then applied the css3 attribute blur: ?px.

See here for an example: http://jsfiddle.net/Z83wR/1/

It works great, except when there are a lot of boxes on the page. The more boxes I show, the more background images I need, the more images I need to blur, and as a result, the more jagged/laggy any dynamic interaction becomes (fade, transition, etc).

What can I do to optimize this?

EDIT: Forgot to mention, this is a chrome extension web app that has no ability to download these images and pre-blur them. Also, all images are from external domains, so cannot use canvas

St. John Johnson
  • 6,590
  • 7
  • 35
  • 56
  • That's a pretty restrictive set up. It doesn't look like there's an answer that fits your criteria. Canvas would be the best for same origin. – Brigand Aug 07 '13 at 06:58
  • Well, the issue is I'm running inside a chrome extension. I'm pretty boxed up. – St. John Johnson Aug 07 '13 at 07:02
  • 1
    [Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.](https://developer.chrome.com/extensions/xhr.html) -- are these all coming from a few URLs? – Brigand Aug 07 '13 at 07:06
  • All from Flickr. Even if I downloaded the images (not really sure how to store them, this appears to be for sending JSON/XML), how would I then blur them? – St. John Johnson Aug 07 '13 at 07:08
  • I suggest using photoshop or any other graphic editor to blur the image and export the same to png/jpg/gif and replace it with your current image, as you want the image to be blur so why don't just create one? - @St.JohnJohnson – Nitesh Aug 07 '13 at 07:09
  • @St.JohnJohnson, check out [this blog post](http://creativejs.com/2011/12/day-5-blur-that-canvas/). – Brigand Aug 07 '13 at 07:10
  • @FakeRainBrigand: if he's coding a Chrome extension for this purpose, doesn't it stand to reason that these images are not going to be from a small, static set of images? – JayC Aug 07 '13 at 07:19
  • @JayC, what's the relevance? If they're all from Flickr, the extension can request permissions for cross-origin, draw one onto a canvas, blur it, and create an object URL. Rinse & repeat. It effectively photoshops it, and creates a new image. – Brigand Aug 07 '13 at 07:22
  • @FakeRainBrigand: "I suggest using photoshop..." my reply was with regard to the relevance of *that* post, not any previous remarks you made with regard to using a canvas to filter. – JayC Aug 07 '13 at 07:26
  • @St.JohnJohnson: I was going to answer earlier that I think that webkit's blur filter, from the looks of what it's doing, is rather intensive; it probably would help to find a "cheaper" filter if at all possible (or simulate one). – JayC Aug 07 '13 at 07:29
  • @JayC do you have any recommendations for faking a blur via other filters? – St. John Johnson Aug 07 '13 at 14:36
  • @FakeRainBrigand Great blog post, seen it before. They use `canvas` to manipulate the image. Since it's cross-origin and Flickr does not provide `CORS` :( http://stackoverflow.com/questions/8415130/does-flickr-support-cors-security-error-with-getimagedata – St. John Johnson Aug 07 '13 at 14:42
  • @St.JohnJohnson: my only current ideas are to use a semi-opaque frost effect (I know, not a true blur, but sometimes just as good), layer a bunch of images, or maybe use flash as Flickr's Crossdomain.xml might allow flash to read the images (but can flash be used in a Chrome extension?). – JayC Aug 07 '13 at 16:28
  • I had thought that SVG might allow for a possibly faster box filter, but I didn't find any documentation for such a filter in SVG. – JayC Aug 07 '13 at 16:31

0 Answers0