XHR + URI Node Not Working in Safari

Question

I am using XMLHttpRequest to generate Blob from data URIs using this 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(); } 

Using:

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

Everything works fine in every browser except Safari. This causes the following error:

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

The question is, are there any ways to make this approach work in Safari?

Answer 1

Why do you need to use XHR? Just do it synchronously (answer obtained from here ):

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