Element Safari img nie będzie renderować obrazu pobranego z usługi (np. Dropbox) jako ArrayBuffer używającego adresu URL blobu

Question

Usługi takie jak Dropbox mogą pobierać obraz, zwracać dane pliku w różnych formach, w tym jako ArrayBuffer. W Webkit możliwe jest utworzenie obiektu typu blob: URL odwołującego się do pobranych danych, a następnie ustawienie go jako atrybutu elementu img w postaci src.

Przykład: http://jsfiddle.net/Jan_Miksovsky/yy7Zs/ pobiera dane obrazu jako ArrayBuffer, a następnie tworzy obszar typu blob: URL i przekazuje go do elementu img. Ten przykład działa w przeglądarce Chrome, ale nie w Safari 6.0.2.

Według Can I Use (http://caniuse.com/#feat=bloburls) i innych źródeł, Safari 6.x obsługuje tworzenie adresów URL obiektów blob. A Safari rzeczywiście obsługuje użycie createObjectURL za pośrednictwem wstępnie ustawionego globalnego webkitURL. Jednakże, jeśli wynikowy URL typu blob jest przekazywany do src elementu img, obraz nie jest renderowany.

Czy w Safari istnieje jakiś inny sposób renderowania obrazu w ten sposób?

Answer 1

po prostu odpowiedział na to pytanie: HTML5 iPhone dynamic caching of images

gdzie można pobrać obraz z Ajax i przekonwertować go na ciąg base64. Następnie możesz użyć tego ciągu do załadowania elementu IMG.

Testowałem w safary 6.0.4 i to działa. (Nie jestem pewien w wersji 6.0.2).

Oto kod:

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(); 

Można go przetestować tutaj:

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