What is the difference between blob and blobbuilder or blobbuilder problem in native android browser

Question

The question is not duplicated from What is the difference between BlobBuilder and the new Blob designer?

I am making a web application. I use Blob to download the image, just in case BlobBuilder . Blob works well, but Blob does not work in the native android browser, the native Android browser uses BlobBuilder . I expected Blob and BlobBuilder return the same blob, but they did not. Here is my code:

 base64toBlob: function(b64Data, contentType, sliceSize) { var BlobBuilder, blob, byteArray, byteCharacters, byteNumbers, charCodeFromCharacter, err, posIndex; if (contentType == null) { contentType = ''; } if (sliceSize == null) { sliceSize = 1024; } posIndex = b64Data.indexOf('base64,'); if (posIndex !== -1) { b64Data = b64Data.substring(posIndex + 7); } charCodeFromCharacter = function(c) { return c.charCodeAt(0); }; byteCharacters = atob(b64Data.replace(/\s/g, '')); byteNumbers = Array.prototype.map.call(byteCharacters, charCodeFromCharacter); byteArray = new Uint8Array(byteNumbers); try { blob = new Blob([byteArray.buffer], { type: contentType }); return blob; } catch (_error) { err = _error; BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder; blob = new BlobBuilder(); blob.append(byteArray.buffer); return blob.getBlob(contentType); } } 

I made logs when sending request

 blobImg = base64toBlob(base64Data, imageType); alert(JSON.stringify(blobImg)); // alert shows {"type": "image/jpeg", "size": 10251 } when blob worked // alert shows {"type": "image/jpeg", "size": 27822 } when blobbuilder worked ajaxRequest.send(blobImg); 

I tried to download the same image in all browsers. In Chrome and other browsers, I get from the magazine {"type": "image/jpeg", "size": 10251 } and successfully send the request, but in my own browser I get {"type": "image/jpeg", "size": 27822 } and the request failed with status code 0 . The Android browser runs the catch part (I think this means that the Android native browser does not support Blob). I tested in Android 4.1.2 . I did not find anything from google about the problem. I would be glad if someone helps me!

Answer 1

Pay attention to the difference between what you are going through:

 try { blob = new Blob([byteArray.buffer], { // use of .buffer type: contentType }); return blob; } catch (_error) { err = _error; BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder; blob = new BlobBuilder(); blob.append(byteArray); // just uses the raw array return blob.getBlob(contentType); } 

From the MDN documentation for BlobBuilder.append :

Adds the contents of the specified JavaScript object to Blob during construction. If the value you specify is not a Blob , ArrayBuffer or String , the value is attached to the string before adding to the blob.

byteArray not of type ArrayBuffer , so it is probably forced into a string. You can confirm this yourself by translating it into a string and checking its length. To fix this, simply use byteArray.buffer in your catch .

Interestingly, the Blob constructor seems to take an ArrayBufferView directly, which matches your Uint8Array . This may mean that you don't really need .buffer , although I am not familiar with the APIs enough to say with confidence.

Answer 2

It works in our case, I don’t know, it will work for you.

 base64toBlob: (b64Data, contentType = '', needArrBuffer) -> posIndex = b64Data.indexOf 'base64,' if posIndex isnt -1 b64Data = b64Data.substring posIndex + 7 charCodeFromCharacter = ( c ) -> c.charCodeAt( 0 ) byteCharacters = b64Data b64Data = b64Data.replace(/\s/g, '') try byteCharacters = atob?(b64Data) byteCharacters ?= Base64.decode(b64Data) catch err byteNumbers = Array.prototype.map.call(byteCharacters, charCodeFromCharacter) byteArray = new Uint8Array(byteNumbers) try new Blob [byteArray.buffer], type: contentType catch err if needArrBuffer # Android browser cannot send Blob by XHR, so we use ArrayBuffer instead of Blob return byteArray.buffer Util.log 'Warning: No native Blob supported! ' + err.message BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder blob = new BlobBuilder() blob.append(byteArray.buffer) blob.getBlob(contentType) blobImg = base64toBlob(base64Data, imageType, true); ajaxRequest.send(blobImg);