toBlob() not working correctly on Safari iOS7

[confile]

I tried the following

canvas.toBlob(function (blob) {
                    alert(blob.size);

                }, 'image/png'
            );

It turns out the the size is very small about 9000 bytes. This is far to low for images made on the iPhone.

Do you have any idea on that?

[confile]

Here is an example. Running on the iPhone I always get the size 0.

    <input id="file" type="file" />

    <img id="img">

    <br>canvas<br>

    <canvas id="mycanvas" ></canvas>


<script type="text/javascript">


$(function(){


    var $inputFile = $("#file"),
    inputFile = $inputFile[0],
    $img = $("#img"),
    img = $img[0];


    var tmpImage = img; // document.createElement("img");


    $inputFile.on("change", function() {
        var files = inputFile.files;

        if (!files || !files.length) 
            return

        var reader = new FileReader()

        reader.onload = function(progressEvent) {

            console.log("reader.result: "+reader.result);

            tmpImage.onload = function() {
                var canvas = $("#mycanvas")[0]; //document.createElement("canvas"),
                context = canvas.getContext("2d");

                canvas.width = this.width;
                canvas.height = this.height;
                context.drawImage(this, 0, 0);

                canvas.toBlob(function(blob) {
                    console.log("done");
                    alert(blob.size);


                }, 'image/jpeg');

            }; // end onload
            tmpImage.src = reader.result;   

        };
        reader.readAsDataURL(files[0]);


    });


});  // end JQuery
</script>

[confile]

Here is a JSFiddle: http://jsfiddle.net/confile/h7zV3/

[blueimp]

I can reproduce your results in the JSFiddle demo you set up, but I suspect it might have something to do with the particular code of your setup.
I'm using this library in several projects, both my own open source projects and production code of commercial products and couldn't reproduce this issue there.
You can see it for yourself on the jQuery File Upload demo, which incorporates this library and displays the recalculated file sizes:
http://blueimp.github.io/jQuery-File-Upload/

I'll close this issue for now, please feel free to do a pull request if you can find a bug in the library code itself.

[confile]

@blueimp Well I just copied the code from your library. The problem is that toBlob() is not working correctly on iphone safari. Are you sure you get this working?

[confile]

Why should the jquery file Upload use canvas to Blob() it is an upload?

[blueimp]

Like I said, please visit the demo I linked to above with Mobile Safari and it will show you recalculated sizes.
The File Upload demo incorporates client-side image resizing, which involves resizing via canvas and then creating Blobs out of the resized canvas images.

[peteroome]

@confile did you work out what the issue was with your code? I'm witnessing an issue on some code i've written that works fine everywhere else, except on iOS devices.

I'm converting 2 separate canvas elements, one after another. The first one has a size of about 256kb which is what i'm expecting, but once saved the image fails to open/display. The second blob has a size of 0.

Was just wondering if you had any pointers as to what you did to solve the problem…

Thanks, and thanks @blueimp for the code in the first place. :-)

[confile]

No