Raster Eyes as browser fallback renderer - shawnbot/raster-eyes GitHub Wiki

Raster Eyes was initially conceived as a tool for simplifying SVG fallbacks in old and/or broken web browsers, or even providing dynamically generated content (specifically, data visualizations) for browsers with JavaScript disabled. Take, for instance, this example, with a theoretical renderChart() function that does something fancy using D3:

<div id="viz"></div>
<script>
d3.select("#vis").call(renderChart);
</script>

If you were to visit this theoretical page with a web browser that had JavaScript disabled, you wouldn't see anything. Now, before we go any further, let's establish some assumptions:

1. This HTML is visible at http://example.com/viz/.
2. You've got the raster-eyes server running on port 9000.
3. Assuming 1. and 2., the URL http://localhost:9000/raster-eyes/?url=example.com/viz/ would produce a screenshot of http://example.com/viz/.

Now, we modify our HTML like so:

<div id="viz">
  <noscript>
    <img src="http://localhost:9000/raster-eyes/?url=example.com/viz/&amp;selector=%23viz">
  </noscript>
</div>
<script>
d3.select("#vis").call(renderChart);
</script>

What have we done? We created a JavaScript-less fallback in the <noscript> tag that loads the screenshot of this URL, cropped to the #viz element. Crazy, right?

⚠️ Using <noscript> pretty much guarantees that raster-eyes will not try to load the image recursively because JavaScript is enabled by default in PhantomJS. However, if you're doing your fallback checks in JavaScript you must ensure that they will not apply to PhantomJS, otherwise you'll probably end up in an infinite loop of raster-eyes requesting its own URLs.