CODEWITHSUNDEEP
javascriptcanvas
DanilGholtsman
DanilGholtsman

Reputation: 2374

Javascript handling image loading - event.target.result is empty

Trying to separate image loading on canvas functionality. It works perfect like that

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/

But when I trying to separate it, it stucks because of event.target.result is becaming undefind for some reason.

Code is here

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

Whats wrong? is there some best practice about that?

Upvotes: 1

Views: 8368

Answers (1)

Pratik Parekh
Pratik Parekh

Reputation: 447

You need to understand the code first right. Try my code which works fine. Where I remove event cast and Image onload cast , also remove Image as argument which had been worked as event not image object.

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

I update fiddle here

Upvotes: 2

Related Questions