Getting Image Dimensions using Javascript File API

I require to generate a thumbnail of an image in my Web Application. I make use of the Html 5 File API to generate the thumbnail.

I made use of the examples from the below URL to generate the thumbnails.

  • How to detect browser support File API drag n drop
  • HTML5 File API crashes Chrome when using readAsDataURL to load a selected image
  • Filesystem API not working in Chrome v27 & v29
  • Getting byte array through input type = file
  • Drag and drop image(s) from desktop to browser instead of searching via input
  • How to iterate through file system directories and files using javascript?
  • http://www.html5rocks.com/en/tutorials/file/dndfiles/

    I am successfully able to generate the thumbnails. The problem that I have is I am able to generate thumbnail only by using a static size. Is there a way to get the file dimensions from the selected file and then create the Image object?

  • Client side text file validation and upload
  • How FileReader.readAsText in HTML5 File API works?
  • Opening PDF from a POST in a new tab
  • Quota exceeded trying to create file with HTML File API
  • Write File to disk chunk by chunk using web browser and client side javascript
  • Getting md5sum of a file through Crypto.js
  • 3 Solutions collect form web for “Getting Image Dimensions using Javascript File API”

    Yes, read the file as a data URL and pass that data URL to the src of an Image: http://jsfiddle.net/pimvdb/eD2Ez/2/.

    var fr = new FileReader;
    
    fr.onload = function() { // file is loaded
        var img = new Image;
    
        img.onload = function() {
            alert(img.width); // image is loaded; sizes are available
        };
    
        img.src = fr.result; // is the data URL because called with readAsDataURL
    };
    
    fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating
    

    Or use an object URL: http://jsfiddle.net/8C4UB/

    var url = URL.createObjectURL(this.files[0]);
    var img = new Image;
    
    img.onload = function() {
        alert(img.width);
    };
    
    img.src = url;
    

    I have wrapped pimvdb answer in a function for general purpose in my project:

    function checkImageSize(image, minW, minH, maxW, maxH, cbOK, cbKO){
        //check whether browser fully supports all File API
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            var fr = new FileReader;
            fr.onload = function() { // file is loaded
                var img = new Image;
                img.onload = function() { // image is loaded; sizes are available
                    if(img.width < minW || img.height < minH || img.width > maxW || img.height > maxH){  
                        cbKO();
                    }else{
                        cbOK();
                    }
                };
                img.src = fr.result; // is the data URL because called with readAsDataURL
            };
            fr.readAsDataURL(image.files[0]);
        }else{
            alert("Please upgrade your browser, because your current browser lacks some new features we need!");
        }
    }