Getting width & height of an image with filereader
You have to wait for the image to load. Try handling the element inside .onload
.
I've also simplified the process of setting the source of the two elements to how you should be doing it (with jQuery).
reader.onload = (function(theFile) { var image = new Image(); image.src = theFile.target.result; image.onload = function() { // access image size here console.log(this.width); $('#imgresizepreview, #profilepicturepreview').attr('src', this.src); };});
For me the solution of Austin didn't work, so I present the one worked for me:
var reader = new FileReader;reader.onload = function() { var image = new Image(); image.src = reader.result; image.onload = function() { alert(image.width); };};reader.readAsDataURL(this.files[0]);
And if you find that assignment image.src = reader.result;
takes place after image.onload a bit wired, I think so too.
Here's an answer inspired by Austin Brunkhorst with a callback for ascertaining image size in case you want to reuse the function elsewhere in your code.
fileControl
is assumed to be a jQuery element.
function didUploadImage(fileControl) { // Render image if file exists. var domFileControl = fileControl[0]; if (domFileControl.files && domFileControl.files[0]) { // Get first file. var firstFile = domFileControl.files[0]; // Create reader. var reader = new FileReader(); // Notify parent when image read. reader.onload = function(e) { // Get image URL. var imageURL = reader.result; // Get image size for image. getImageSize(imageURL, function(imageWidth, imageHeight) { // Do stuff here. }); }; // Read image from hard disk. reader.readAsDataURL(firstFile); // Print status. console.log("Uploaded image: " + firstFile.name); }}function getImageSize(imageURL, callback) { // Create image object to ascertain dimensions. var image = new Image(); // Get image data when loaded. image.onload = function() { // No callback? Show error. if (!callback) { console.log("Error getting image size: no callback. Image URL: " + imageURL); // Yes, invoke callback with image size. } else { callback(this.naturalWidth, this.naturalHeight); } } // Load image. image.src = imageURL;}