javascript - Safari img 元素不会使用 blob URL 将从服务(例如 Dropbox)检索到的图像呈现为 ArrayBuffer

Question

Dropbox 等服务可以下载图像，以各种形式返回文件数据，包括作为 ArrayBuffer。在 Webkit 中，可以创建一个引用下载数据的 blob: URL，然后将其设置为 img 元素的 src 属性。

示例:http://jsfiddle.net/Jan_Miksovsky/yy7Zs/检索图像数据作为 ArrayBuffer，然后创建一个 blob: URL 并将其传递给 img 元素。此示例适用于 Chrome，但不适用于 Safari 6.0.2。

根据 Can I Use (http://caniuse.com/#feat=bloburls) 和其他来源，Safari 6.x 支持创建 blob 对象 URL。 Safari 确实支持通过前缀全局 webkitURL 使用 createObjectURL。但是，如果将生成的 blob URL 传递给 img 元素的 src，则不会呈现图像。

Safari 中是否有其他方式来呈现以这种方式检索到的图像？

Answer 1

我刚刚回答了这个问题:HTML5 iPhone dynamic caching of images

在这里您可以从 ajax 下载图像并将其转换为 base64 字符串。然后您可以使用此字符串加载 IMG 元素。

我已经在 safary 6.0.4 中进行了测试并且可以正常工作。 (我不确定 6.0.2)。

代码如下:

function _arrayBufferToBase64( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}


var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jsbin.com/images/favicon.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
        if (this.status == 200) {
          var string_with_bas64_image = _arrayBufferToBase64(this.response);
          document.getElementById("img").src = "data:image/png;base64," + string_with_bas64_image;
        }
};

xhr.send();

你可以在这里测试它:

http://jsbin.com/ivifiy/1/edit