XHR + Daten URI funktioniert nicht in Safari

Question

ich XMLHttpRequest verwenden zu generieren Blob von Daten URI mit diesem Code:

function dataUrlToBlob(dataUrl, callback) { 
    var xhr = new XMLHttpRequest; 
    xhr.open('GET', dataUrl); 
    xhr.responseType = 'arraybuffer'; 
    xhr.onload = function(e) { 
     callback(new Blob([this.response], {type: 'image/png'})); 
    }; 
    xhr.send(); 
} 

Verbrauch:

dataUrlToBlob('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=', callback); 

Alles funktioniert in jedem Browser in Ordnung, außer Safari . Es wirft solch einen Fehler auf:

[Error] XMLHttpRequest cannot load data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=. Cross origin requests are only supported for HTTP.

Die Frage ist, gibt es irgendwelche Möglichkeiten, diesen Ansatz in Safari arbeiten zu lassen?

Answer 1

Warum würden Sie ein XHR verwenden, um das zu tun? Tun Sie es einfach synchron (Antwort von here genommen):

function dataURItoBlob(dataURI) { 
    if(typeof dataURI !== 'string'){ 
     throw new Error('Invalid argument: dataURI must be a string'); 
    } 
    dataURI = dataURI.split(','); 
    var type = dataURI[0].split(':')[1].split(';')[0], 
     byteString = atob(dataURI[1]), 
     byteStringLength = byteString.length, 
     arrayBuffer = new ArrayBuffer(byteStringLength), 
     intArray = new Uint8Array(arrayBuffer); 
    for (var i = 0; i < byteStringLength; i++) { 
     intArray[i] = byteString.charCodeAt(i); 
    } 
    return new Blob([intArray], { 
     type: type 
    }); 
}