Javascript処理イメージの読み込み - event.target.resultが空です

Question

キャンバスの機能でイメージの読み込みを分離しようとしています。 それはその

HTML

<label>Image File:</label> <br/> <input type="file" id="imageLoader" name="imageLoader" /> <canvas id="imageCanvas"></canvas>

javascriptの

var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 
var canvas = document.getElementById('imageCanvas'); 
var ctx = canvas.getContext('2d'); 


function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      canvas.width = img.width; 
      canvas.height = img.height; 
      ctx.drawImage(img,0,0); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
} 

http://jsfiddle.net/influenztial/qy7h5/

しかし、私はそれを分離しようとすると、それが立ち往生のように完璧に動作します何らかの理由でevent.target.resultがundefindとなっています。

コードはここに

http://jsfiddle.net/qy7h5/1840/

いただきましたが間違っているのですか？それについていくつかのベストプラクティスはありますか？

Answer 1

コードを最初に理解する必要があります。うまく動作する私のコードを試してください。 イベントキャストとイメージオンロードキャストを削除する場合は、イメージオブジェクトではなくイベントとして機能していたImage as引数も削除してください。

var imageLoader = document.getElementById('imageLoader'); 
imageLoader.addEventListener('change', handleImage, false); 
var canvas = document.getElementById('imageCanvas'); 
var ctx = canvas.getContext('2d'); 

function handleImage(e) { 
var reader = new FileReader(); 
reader.onload = function(event) { 
    onReaderLoad(event); 
} 
reader.readAsDataURL(e.target.files[0]); 
} 
var onReaderLoad = function(event) { 
var image = new Image(); 

image.onload = function() { 
onImageLoad(image); 
} 

image.src = event.target.result; 
} 

var onImageLoad = function(img) { 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.drawImage(img, 0, 0); 
} 

私はフィドルhere