Safari img элемент не будет отображать изображение, полученное из сервиса (например, Dropbox) , как ArrayBuffer с помощью blob URL

Такие сервисы, как Dropbox, могут загружать изображение, возвращать данные файла в различных формах, в том числе в виде ArrayBuffer. В Webkit можно создать blob: URL, который ссылается на загруженные данные, а затем установить его в качестве атрибута src элемента img.

Пример: 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 объект. И Safari действительно поддерживает использование createObjectURL через приставку global webkitURL. Однако если результирующий URL-адрес blob-объекта передается в src элемента img, изображение не отображается.

Существует ли в Safari какой-либо другой способ визуализации изображения, полученного таким образом?

1 5
javascript safari dropbox

1 ответ:

Я только что ответил на этот вопрос: HTML5 iPhone динамическое кэширование изображений

Где вы можете загрузить изображение из 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

2