Cross-Herkunft Bild load verweigert - nur iPhone - einfaches Bild hochladen

Question

Ich versuche, ein Bild von meinem iPhone zu laden und dieses Bild mehrmals zu verwenden, um auf die Leinwand zu zeichnen und speichern Sie das Bild schließlich (obwohl ich nicht implementiert haben der sparsame Teil noch). Ich benutze das Beispiel hier: http://code.hootsuite.com/html5/, das ich für das Zeichnen des Bildes arbeiten kann, wenn ich versuche, das Bild zu ändern, erhalte ich jedoch den Ursprung-Kreuzfehler. Das Hochladen und Bearbeiten von Bildern funktioniert gut mit Android-Geräten in Chrome (funktioniert aber nicht mit dem iPhone in Safari). Hat jemand ein ähnliches Problem erlebt oder kann er eine Lösung anbieten?

if (window.File && window.FileReader && window.FormData) { 
    var inputField = document.getElementById('file'); 
    inputField.addEventListener('change', function(e){ 
     var file = e.target.files[0]; 
     if (file) { 
      if (/^image\//i.test(file.type)) { 
       readFile(file); 
      } else { 
       alert('Not a valid image!'); 
      } 
     } 
    }) 
    } else { 
    alert("FILE UPLOAD NOT SUPPORTED"); 
    } 

    function readFile(file) { 
    var reader = new FileReader(); 

    reader.onloadend = function() { 
     console.log('reader.onloadend'); 
     processFile(reader.result, file.type); 
    }; 

    reader.onerror = function() { 
     alert('There was an error reading the file!'); 
    }; 

    reader.readAsDataURL(file); 
    } 

    function processFile(dataURL, fileType) { 
    var maxWidth = 600; 
    var maxHeight = 600; 

    var image = new Image(); 
    image.src = dataURL; 

    image.onload = function() { 
     var width = image.width; 
     var height = image.height; 
     var shouldResize = (width > maxWidth) || (height > maxHeight); 

     main(image); // this passes image to function that draws image to canvas and crops 
    } 

Answer 1

Es scheint ein Bug/Einschränkung mit Webkit-basierten Browsern in iOS zu sein.

Als Workaround: Sie könnten versuchen, das Bild als ArrayBuffer (readAsArrayBuffer()) stattdessen hochladen und erstellen Sie einen Blob und eine Objekt-URL als Quelle festlegen.

Weitere Informationen finden Sie unter this answer.