Can't get image width and height property from base64 data - html

Question

I am uploading an image and i expect base64 data of that image.I am trying below code that works to get image data as base64.
1) function getImage(file,count) //file is files[i] of input:file passed from for()
{
if(file)
{
var reader = new FileReader();
reader.onload = function(event)
{
var data = event.target.result;
var image = document.createElement("img");
image.id = 'img'+count;
image.class = 'edit';
image.src = data;
console.log('width:'+this.width);//not working value is undefined
console.log('height:'+this.height);//not working value is undefined
//image.title = 'click to edit';
image.data = count;
data = image.dataset;
data.ref=count;
document.getElementById('image'+count).appendChild(image);
jQuery(document.getElementById('image'+count)).removeClass('disable');
jQuery(document.getElementById('img'+count)).addClass('action editable img ');
}
reader.readAsDataURL(file);
}
}
This works fine and it creates an img tag with image loaded correctly.
But I want to know the image width and height before creating img element, so i tried below code,
2) function getImage(file,count)
{
if(file)
{
var reader = new FileReader();
reader.onload = function(event)
{
var img = new Image();
var data = event.target.result;
img.onload = function(){
console.log(img.width);
var image = document.createElement("img");
image.id = 'img'+count;
image.class = 'edit';
image.src = data;
console.log('width:'+this.width);
console.log('height:'+this.height);
image.data = count;
data = image.dataset;
data.ref=count;
document.getElementById('image'+count).appendChild(image);
jQuery(document.getElementById('image'+count)).removeClass('disable');
jQuery(document.getElementById('img'+count)).addClass('action editable img ');
};
}
reader.readAsDataURL(file);
}
}
But the second code does not prints log and img tag is not created. so what is the problem?What wrong in my code?Any better way to achieve this?.

Answer 1

just single line makes my problem null,
Thanks to this.
function getImage(file,count)
{
if(file)
{
var reader = new FileReader();
reader.onload = function(event)
{
var img = new Image();
var data = event.target.result;
img.src = data; //this line solved my problem..
img.onload = function(){
var image = document.createElement("img");
image.id = 'img'+count;
image.class = 'edit';
image.src = data;
console.log('width:'+this.width);
console.log('height:'+this.height);
image.data = count;
data = image.dataset;
data.ref=count;
document.getElementById('image'+count).appendChild(image);
jQuery(document.getElementById('image'+count)).removeClass('disable');
jQuery(document.getElementById('img'+count)).addClass('action editable img ');
};
}
reader.readAsDataURL(file);
}
}
Waiting for any better answer..