How to display an image offline using Famo.us - image

Question

How can you display an image that can be used offline using Famo.us?
A Famo.us Image surface sets it's content based on an image URL. However, when offline, this URL will not work. I have tried using an HTTP request and converting the buffer to a Blob and then creating a URI for the Blob:
// bytes = request.buffer of HTTP request
// Make a Blob from the bytes
var blob = new Blob([bytes], {type: 'image/jpg'});
// Use createObjectURL to make a URL for the blob
imageURL = URL.createObjectURL(blob);
//Use Famo.us image surface API to display the image (http://famo.us/docs/api/latest/surfaces/ImageSurface)
imageSurface.setContent(imageURL);
This does not throw any warning or errors but displays a broken image. Any suggestions? I want to display an image even when I am offline, but when I reconnect I will request for the newest image uploaded.

Answer 1

ImageSurface in Famo.us can take a url to the image or the base-64 encoded data.
Using Blob:
Use the file reader to readAsDataURL
var reader = new FileReader();
reader.onloadend = function () {
imageURL = reader.result;
}
reader.readAsDataURL(blob);
Using Canvas:
There are plenty of ways to get the encoded base-64 data. Canvas has another way to get this string for you.
Example jsBin Here
Using the example snippet below, you can see how you can use Canvas.toDataURL.
var image = new Image();
image.crossOrigin = 'anonymous'; // only needed for CORS, not needed for same domain.
// create an empty canvas element
var canvas = document.createElement("canvas");
var canvasContext = canvas.getContext("2d");
image.onload = function () {
//Set canvas size is same as the picture
canvas.width = image.width;
canvas.height = image.height;
// draw image into canvas element
canvasContext.drawImage(image, 0, 0, image.width, image.height);
// get canvas contents as a data URL (returns png format by default)
imageURL = canvas.toDataURL();
};
image.src = 'http://code.famo.us/assets/famous_logo.png';