Canvas toBlob funktioniert nicht auf iPhone Safari?

Question

Ich versuche, ein Leinwandbild in einen Blob zu konvertieren. Dies kann mit der toBlob() polyfile erfolgen. Es funktioniert auf Desktop-Browsern, aber auf dem iPhone bekomme ich keinen Blob. Die Größe ist immer Null.

Hier ist ein JsFiddle hierfür: http://jsfiddle.net/confile/h7zV3/

Wie kann ich den Blob von der Leinwand auf dem iPhone zu bekommen?

Hier ist der Code, den ich verwendet:

<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

Sie verwenden können.

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

Jedes Element des zurückgegebenen Arrays ein Byte des Bildes ist, wird das Bild unter Berücksichtigung 3 Bytes pro Pixel in der Reihenfolge 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

Verwenden Sie dieses Plugin JavaScript-Canvas-to-Blob Canvas-Elemente in Blob-Objekte zu konvertieren.

Dann nutzen Sie die canvas.toBlob() Verfahren in der gleichen Weise wie die native Implementierung