7

I try to convert a canvas image into a blob. This can be done with the toBlob() polyfile. It works on desktop browsers but on iPhone I do not get any blob. The size is always zero.

Here is a JsFiddle for this: http://jsfiddle.net/confile/h7zV3/

How do I get the Blob from the canvas on the iPhone?

Here is the code I used:

    <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);


                var dataUrlValue = canvas.toDataURL(); //canvas.toDataURL("image/jpeg");
                alert(dataUrlValue);
                var myBlob1 = dataURItoBlob(dataUrlValue);
                console.log(myBlob1);
                alert(myBlob1.size);


                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>
1
  • did you get any solution
    – Lijo
    May 10, 2020 at 19:28

2 Answers 2

9

Use this plugin JavaScript-Canvas-to-Blob to convert canvas elements into Blob objects.

Then use the canvas.toBlob() method in the same way as the native implementation

0
-1

You may use.

var data = context.getImageData(0, 0, IMAGE_WIDTH, IMAGE_HEIGHT);

Each element of the returned array is a byte of the image, considering the image is 3 bytes per pixel in the order RGB.

for(var i = 0; i < data.length; i++) {
  // do something for saving the data (bytes) in the format you need
  // ... if you need to
}
1
  • oh, i'm sorry, i just realised it's actually not compatible with ios
    – Gamaliel
    Feb 24, 2014 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.