Загрузка изображения на холст из локальной файловой системы предварительного загрузить

Question

Я довольно новыми для JavaScript и не могу получить мою голову вокруг вопроса последующей совместимости браузера:

Следующие прекрасно работает в Chrome, IE и Opera (еще не пробовала сафари), но отказывается работать в Firefox. Я искал hi и low для объектов и свойств, которые не поддерживаются в Firefox, которые я вызывал, но не могу найти.

Во всяком случае, вот код:

<input type='file' accept='image/*' onchange='loadImg(event)'><br> 
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas><br> 
<button type="button">Upload</button><br> 

<script> 
var loadImg = function(event) { 
    var input = event.target; 

    var reader = new FileReader(); 
    reader.readAsDataURL(input.files[0]); 

    reader.onloadend = function() { 
     var dataURL = reader.result; 
     var output = document.getElementById('myCanvas'); 
     var context = output.getContext('2d'); 
     var imageObj = new Image(); 
     imageObj.src = dataURL; 
     context.drawImage(imageObj,1,1,198,198); 
    }  
} 
</script> 

Answer 1

Это потому, что изображение не загружается еще, когда вы рисуете его на холсте. Вы можете сделать это следующим образом:

<input type='file' accept='image/*' onchange='loadImg(event)'><br> 
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas><br> 
<button type="button">Upload</button><br> 

<script> 
var loadImg = function(event) { 
    var output = document.getElementById('myCanvas'); 
    var context = output.getContext('2d'); 
    var input = event.target; 
    var reader = new FileReader(); 
    reader.onload = function() { 
     var dataURL = reader.result; 
     var imageObj = new Image(); 
     imageObj.src = dataURL; 
     imageObj.onload=function(){ 
      context.drawImage(imageObj,1,1,198,198); 
     } 
    } 
    reader.readAsDataURL(input.files[0]); 


} 
</script> 

imageObj.onload обратного вызова будет выполняться при загрузке изображения. Кажется, что firefox не загружает сразу данные-uri-изображения, тогда как хром делает ...