Eingabe onchange Javascript Funktionsaufruf funktioniert nicht in Safari

Question

Ich habe eine HTML-Leinwand, die eine Vorschau eines Bildes zeigt, wenn das Bild in einer Eingabe ausgewählt ist. Dies funktioniert in Chrome, aber ich kann es anscheinend nicht in Safari verwenden. Speziell - in Safari - scheint die onchange="previewFile()" die Funktion previewFile nicht aufzurufen.

<canvas id="canvas" width="0" height="0"></canvas> 
 

 
<h2>Upload a photo </h2> 
 
<input type="file" onchange="previewFile()"><br> 
 

 
<script type="text/javascript"> 
 

 
    // setup the canvas 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 

 
    // grab the photo and display in canvas 
 
    var photo = new Image(); 
 
    function previewFile() { 
 
     var file    = document.querySelector('input[type=file]').files[0]; 
 
     var reader  = new FileReader();  
 

 
     reader.addEventListener("load", function() { 
 
      photo.src = reader.result; 
 
      canvas.height = photo.height; 
 
      canvas.width = photo.width; 
 
      ctx.drawImage(photo,0,0); 
 
     }, false); 
 

 
     if (file) { 
 
    reader.readAsDataURL(file); 
 
     }  
 
    } 
 

 
</script>

Answer 1

Ihr Problem ist sicherlich aufgrund der Tatsache, dass Sie nicht für das Bild warten geladen ist, bevor Sie versuchen, es auf der Leinwand zu zeichnen.

Auch wenn die Quelle ein DataURI ist, ist das Laden des Bildes asynchron, also müssen Sie Ihre Zeichenoperationen in das Ereignis onload des Bildes umbrechen.

var photo = new Image(); 
photo.onload = function(){ 
    canvas.height = photo.height; 
    ... 
    } 
... 
reader.onload = function(){ 
    // this will eventually trigger the image's onload event 
    photo.src = this.result; 
    } 

Aber wenn alles, was Sie brauchen Ihr Bild auf der Leinwand zu zeichnen, verwenden Sie nicht einmal einen Filereader, eigentlich die readAsDataURL() Methode soll einen I'm doing something wrong Fehler in Ihrem Gehirn auslösen. Fast alles, was Sie mit einer dataURI-Version eines Blobs tun können, können Sie auch mit dem Blob selbst tun, ohne ihn zu berechnen oder den Speicher des Browsers zu verschmutzen.

Um beispielsweise ein Bild für Benutzereingaben anzuzeigen, können Sie die Methode verwenden.

// setup the canvas 
 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
// grab the photo and display in canvas 
 
var photo = new Image(); 
 
// drawing operations should be in the mage's load event 
 
photo.onload = function() { 
 
    // if you don't need to display this image elsewhere 
 
    URL.revokeObjectURL(this.src); 
 

 
    canvas.height = this.height; 
 
    canvas.width = this.width; 
 
    ctx.drawImage(this, 0, 0); 
 
} 
 
photo.onerror = function(e) { 
 
    console.warn('file format not recognised as a supported image'); 
 
} 
 
file_input.onchange = function() { 
 
    // prefer 'this' over DOM selection 
 
    var file = this.files[0]; 
 
    var url = URL.createObjectURL(file); 
 
    photo.src = url; 
 
};

<canvas id="canvas" width="0" height="0"></canvas> 
 

 
<h2>Upload a photo </h2> 
 
<input type="file" id="file_input"> 
 
<br>

Und für diejenigen, die diese Datei auf ihrem Server senden müssen, eine FormData verwenden, um direkt den Blob zu senden. Wenn Sie eine dataURI-Version wirklich benötigen, konvertieren Sie sie serverseitig.