如何使用Famo.us脱机显示图像

Question

如何显示可以使用Famo.us脱机使用的图像？

Famo.us图像曲面基于图像URL设置其内容。但是，当脱机时，此URL将无法工作。我尝试使用HTTP请求并将缓冲区转换为Blob，然后为Blob创建一个URI：

    // 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 in Famo.us可以对图像或基-64编码的数据获取一个url。

使用Blob

将文件读取器用于readAsDataURL

 var reader  = new FileReader();

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

  reader.readAsDataURL(blob);

使用Canvas

有很多方法可以获得编码的基数-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';