5

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 中是否有其他方法可以渲染以这种方式检索到的图像？

4

1 回答 1

2

我刚刚回答了这个问题：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/ivify/1/edit

于 2013-06-02T10:40:00.247 回答