How to display an image offline using Famo.us

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.

[@mwilli31](http://stackoverflow.com/users/4686086/mwilli31) using `Blob` will require `FileReader` and gets somewhat messy for what you need. Are you loading the image into the Blob using the URL? I have a solution, but does not use the Blob. — talves, Mar 18 '15 at 18:58
I am loading the image into the Blob after I have received the image data bytes from a HTTP request. The canvas answer looks promising, I will try that out. — mwilli31, Mar 19 '15 at 03:40
The nice thing about the canvas solution, is you can add stuff like watermarks, etc to images for rendering without having to add them to the image themselves. — talves, Mar 19 '15 at 16:42

score 0 · Accepted Answer · answered Mar 18 '15 at 22:44

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';

This works! The only thing I needed to change was add the image.src to be before the image.onload function. I received a broken image otherwise. — mwilli31, Mar 19 '15 at 03:57

How to display an image offline using Famo.us

1 Answers1

Using Blob:

Using Canvas:

Example jsBin Here

Using `Blob`:

Using `Canvas`: