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

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>

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

• javascript
• iphone
• html
• canvas

• did you get any solution – Lijo Commented May 10, 2020 at 19:28

2 Answers 2

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

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
}