L'elemento img di Safari non renderà l'immagine recuperata dal servizio (ad es. Dropbox) come ArrayBuffer usando l'URL blob

Question

Servizi come Dropbox possono scaricare un'immagine, restituire i dati del file in varie forme, incluso come ArrayBuffer. In Webkit, è possibile creare un blob: URL che fa riferimento ai dati scaricati e impostarlo come attributo src di un elemento img.

Esempio: http://jsfiddle.net/Jan_Miksovsky/yy7Zs/ recupera i dati di un'immagine come ArrayBuffer, quindi crea un blob: URL e passa a un elemento img. Questo esempio funziona in Chrome, ma non in Safari 6.0.2.

Secondo Can I Use (http://caniuse.com/#feat=bloburls) e altre fonti, Safari 6.x supporta la creazione di URL oggetto blob. Safari supporta infatti l'utilizzo di createObjectURL tramite il webkitURL globale prefissato. Tuttavia, se l'URL del blob risultante viene passato a src di un elemento img, l'immagine non viene renderizzata.

C'è qualche altro modo in Safari per rendere un'immagine recuperata in questo modo?

Answer 1

Ho appena risposto a questa domanda: HTML5 iPhone dynamic caching of images

dove è possibile scaricare un'immagine da Ajax e convertirlo in una stringa base64. Quindi puoi usare questa stringa per caricare un elemento IMG.

Ho provato in safary 6.0.4 e funziona. (Non sono sicuro in 6.0.2).

Ecco il codice:

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

È possibile verificare qui:

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