サファリでonchange javascript関数の呼び出しが機能しない

Question

入力で画像が選択されたときに画像のプレビューを表示するhtmlキャンバスがあります。これはChromeでも動作しますが、Safariで動作させることはできません。具体的には、Safariではonchange="previewFile()"はpreviewFile関数を呼び出すようには見えません。

<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

あなたの問題は確かにあなたがキャンバス上に描画しようとする前に、イメージがロードされたために、あなたが待っていないことに起因します。

ソースがdataURIであっても、イメージのロードは非同期であるため、描画操作をイメージのonloadイベントでラップする必要があります。

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

しかし、あなたが必要とするすべてのも、FileReaderを使用しないでください、キャンバス上の画像を描画する場合、実際には、readAsDataURL()方法は、あなたの脳内I'm doing something wrongエラーをトリガする必要があり

。ほとんどの場合、BlobのdataURIバージョンで行うことができます。また、Blob自体を計算することも、ブラウザのメモリを汚染することもありません。

たとえば、ユーザーの入力用の画像を表示するには、URL.createObjectURL(blob)メソッドを使用できます。

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

直接ブロブを送信するためにFormDataを使用し、そのサーバーにこのファイルを送信するために必要とする人のために。本当にdataURIバージョンが必要な場合は、サーバー側に変換してください。