Как отобразить изображение в автономном режиме с помощью Famo.us

Question

Как вы можете отобразить изображение, которое можно использовать в автономном режиме, используя Famo.us?

Поверхность изображения Famo.us устанавливает свое содержимое на основе URL-адреса изображения. Однако в автономном режиме этот URL не будет работать. Я попытался использовать HTTP-запрос и преобразовать буфер в Blob, а затем создать URI для 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);

Это не вызывает каких-либо предупреждений или ошибок, но отображает сломанное изображение. Какие-либо предложения? Я хочу отображать изображение, даже когда я не в сети, но при повторном подключении я буду запрашивать самое новое загруженное изображение.

Answer 1

ImageSurface в Famo.us может взять URL-адрес изображения или закодированных данных base-64.

С помощью Blob:

Используйте программу для чтения файлов readAsDataURL

 var reader  = new FileReader();

  reader.onloadend = function () {
    imageURL = reader.result;
  }

  reader.readAsDataURL(blob);

С помощью Canvas:

Есть много способов получить закодированные данные base-64. Canvas есть другой способ получить эту строку для вас.

Пример jsBin Здесь

Используя приведенный ниже пример кода, вы можете увидеть, как вы можете использовать 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';