Canvas toBlob не работает на iPhone Safari?

Question

Я пытаюсь преобразовать изображение холста в blob. Это можно сделать с помощью toBlob() polyfile. Он работает на настольных браузерах, но на iPhone я не получаю никакого blob. Размер всегда равен нулю.

Вот JsFiddle для этого: http://jsfiddle.net/confile/h7zV3/

Как получить Blob с холста на iPhone?

Вот код, который я использовал:

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

Answer 1

Вы можете использовать.

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

Каждый элемент возвращенного массива является байт изображения, рассматривая изображение 3 байта на пиксель в порядке 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 
} 

Answer 2

Используйте этот плагин JavaScript-Canvas-to-Blob преобразовать элементы холста в объекты Blob.

Затем используйте canvas.toBlob() метод точно так же, как родной реализации