|Screen capture of WebGL/Three.js demo showing images hosted on cross origin server|
Source Code: https://github.com/theo-armour/threo.js/tree/gh-pages/cube-demos/webgl-cubed
Except for one.
[ Otherwise we wouldn't have a post, would we? ]
The process for re-encoding images is very simple. There are a number of web sites that will do the re-encoding for you.
This site allows you to drag and drop an image and then displays the ASCII text nearly immediately.
This site allows you to paste in an URL. It also provides examples as to how you can embed the code in a web page or program.
Here's what the code to an embedded image looks like:
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
When you look at the demo, you will note that it loads fast - after all all the code is in a single file rather than in a seven files: http://ta.capnix.com/webgl-cubed/webgl-cubed.js
Currently it will take you a few two or three extra steps to prepare base64 encoded images. My guess is that in the near future there will be routines that will grab images off a remote web site - such as Flickr - and re-encode the images dynamically. In the mean time, I hope that I have provided you with with a nice way to prevent the loss of your good image...
Update 1 ~ 2012-04-25
>> in the near future there will be routines that will grab images off a remote web site
>>- such as Flickr - and re-encode the images dynamically
Similar code could be used to read binary image data and re-encode it to base64.
Update 2 ~ 2012-04-28
PatrickH points out that this post does not mention Cross-Origin Resource Sharing - an industry standard which enables truly open access across domain-boundaries.
For example, Picasa is one web service that already supports CORS
I plan on writing a post that covers the aspects of when CORS is best, when embedding is best and when some type of 'hot-linking' might be suitable. .