StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>Is there a better way to achieve this with minimal performance hit and maximal generalizability?</p> </blockquote> <p>The answer to this is <strong>no</strong>.</p> <p>The reason is that in order to do what you want you would need direct access to the bitmap used for the browser window to extract or manipulate the pixels in the area you want to blur (I wish, "aero" in a browser could look pretty neat..) or a filter that works on the elements behind the one you apply it to (or can have a limiting region set to it).</p> <p>As there is no native support to do this (besides canvas and extension API, or a library that generate canvas image from the html -> relatively slow) this will need to be done with trickery (images, splitting divs etc.) in either case.</p> <p>If you made everything in your page on a canvas you could do a lot of interesting things, but you would also need to perform layout, update, filtering etc. yourselves and therefor you would be back no non-optimized as Javascript is slower than native (not to mention it would be error prone).</p> <p>Until browsers allow you to grab a section of the window as a canvas (never? as that would require everything on that page to be same-origin or have content with special accept headers set) there is no way around but to do tricks.</p> <p><strong>Update</strong></p> <p>As an demonstration that you can do it by using html2canvas etc, but having to use compromises (-> slow performance) - the demo is rough, experimental and needs tweaks to work well - but for the sake of demo only:<br> <a href="http://jsfiddle.net/AbdiasSoftware/RCaLR/" rel="noreferrer">http://jsfiddle.net/AbdiasSoftware/RCaLR/</a></p> <p>Result:</p> <p><img src="https://i.stack.imgur.com/i0SUs.png" alt="enter image description here"></p> <p>Generalized function to grab part of background:</p> <pre><code>getBlurredBG(x, y, width, height, id); </code></pre> <p>Get part of window using html2canvas:</p> <pre><code>function getBlurredBG(x, y, w, h, id) { html2canvas(document.body, { onrendered: function (canvas) { process(canvas, x, y, w, h, id); }, width: (x + w), height: (y + h) }); } </code></pre> <p>Process the content:</p> <pre><code>function process(canvas, x, y, w, h, id) { //create new canvas to enable clipping //As html2canvas returns a canvas from 0,0 to width and height //we need to clip it. var ocanvas = document.createElement('canvas'); ocanvas.width = w; ocanvas.height = h; ocanvas.style.left = x + 'px'; ocanvas.style.top = y + 'px'; ocanvas.style.position = 'absolute'; ocanvas.id = id; var ctx = ocanvas.getContext('2d'); ctx.drawImage(canvas, x, y, w, h, 0, 0, w, h); stackBlurCanvasRGB(ocanvas, x, y, w, h, 28) lighten(ocanvas); ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.fillRect(x, y, w, h); ctx.fillStyle = '#999'; ctx.font = '32px arial'; ctx.fillText("Partial overlay content", 10, 60); document.body.appendChild(ocanvas); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload