XHR +数据URI在Safari中不起作用

Question

我用这个代码从数据URI XMLHttpRequest生成Blob:

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

用法:

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

除Safari外,所有浏览器都能正常运行.它抛出这样一个错误:

[错误] XMLHttpRequest无法加载数据:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII =.仅支持HTTP的跨源请求.

问题是,有没有办法让这种方法在Safari中运行？

Answer 1

为什么要使用 XHR 来做到这一点？只需同步执行即可（答案取自此处）：

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