Search code examples
javascriptinternet-explorerfirefoxuncaught-exception

Blob to base64 encoded DataURI of type image/webp

Using the following in Firefox or IE (works in Chrome and Opera):

xhr = new XMLHttpRequest();
xhr.open( "GET", imgUrl + ".png", true );
xhr.responseType = "arraybuffer";

var arrayBufferView = new Uint8Array( xhr.response );
var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );

I get:

uncaught exception: Input must be formatted properly as a base64 encoded DataURI of type image/webp

How can I go from blob to base64 encoded DataURI of type image/webp? I am not very experienced with web JavaScript so apologies is this a simple fix.

Solution

  • Internet Explorer and Firefox do not support the WebP image format and currently have no plans of supporting it.

    https://bugzilla.mozilla.org/show_bug.cgi?id=webp https://bugzilla.mozilla.org/show_bug.cgi?id=856375

    Edit: Anyway, this question has answers with full examples: Getting BLOB data from XHR request