Question

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

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

根据我可以使用（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

Safari img元素不会使用blob URL将从服务（例如，Dropbox）检索的图像呈现为ArrayBuffer

1 个答案: