ios - Javascript Blob constructor not working on iPad

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)();
    imgBlob = blobBuilderObj.getBlob('image/jpeg');
} else {
    // Cannot generate Blob
    alert('Error occurred during Blob generation');

// 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

1 Answer

  1. Joseph- Reply


    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>