Javascript Blob constructor not working on iPad

Question

I am trying to take a screenshot of the user's screen when they are using my website and upload it to the server using html2canvas. This works well at my desktop using Chrome and Firefox (screen > html2canvas > imageURL > Unit8Array > Blob > upload).

However when I run the code on an iPad, the Blob creation code is messing up the input from html2canvas's image file. The image shrinks for no apparent reason from around 40k in size to 19 bytes. Below is my code.

The iPad's output is highlighted using "*".

var unit8 = new Uint8Array(imageArray);
var imgBlob;

// check length of encoded image
// *** On this iPad, this generates meaningful size eg 41240 ***
if(navigator.userAgent.match(/iPad/i) != null){                     
    alert('length of the Unit8Array: ' + unit8.length);
}

if(typeof Blob !== 'undefined'){
    // detect if Blob object is supported
    // *** The iPad supports Blob object, it even support it's constructor ***
imgBlob = new Blob([unit8], {type: 'image/jpeg'});
} else if(window.BlobBuilder || window.MSBlobBuilder || 
            window.WebKitBlobBuilder || window.MozBlobBuilder) {
    // generating Blob - the old fashion way
    // Not used by iPad
    var blobBuilderObj = new (window.BlobBuilder || window.WebKitBlobBuilder ||
              window.MozBlobBuilder || window.MSBlobBuilder)();
    blobBuilderObj.append(unit8.buffer);
    imgBlob = blobBuilderObj.getBlob('image/jpeg');
} else {
    // Cannot generate Blob
    alert('Error occurred during Blob generation');
    return;
}

// check length of encoded image
// *** On the iPad imgBlob.size = 19 and imgBlob.toString() = [Object Blob] ***
if(navigator.userAgent.match(/iPad/i) != null){
    alert('Before attach 1: length of the encoded message: ' + imgBlob.size + 
        ', Blob content: ' + imgBlob.toString());
}

Any idea why?

Many Thanks, Hoi

Doesn't fully answer the question, but some conjecture on why it may not work: [blob does not accept Uint8Array on ios](http://stackoverflow.com/questions/14340989/blob-does-not-accept-uint8array-on-ios) — Andrew Klatzke, Jan 22 '13 at 20:46

score 2 · Answer 1 · edited May 23 '17 at 10:27

2

From my research of comments here, it looks like you have to pass to Blob() constructor not Uint8Array object, but it's buffer property:

new Blob([unit8.buffer], {..})

At least this way I've managed to create Blobs which can be uploaded on iOS6 on iPhone5.

edited May 23 '17 at 10:27

Community

1
1

answered Aug 27 '13 at 11:27

KIR

5,614
1
31
23

Javascript Blob constructor not working on iPad

1 Answers1