Getting image dimensions using the JavaScript File API

by

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

More Related Contents:

  1. Getting Image Dimensions using Javascript File API
  2. How to set File objects and length property at FileList object where the files are also reflected at FormData object?
  3. How do I download a file with Angular2 or greater
  4. How to get a file or blob from an object URL?
  5. Blob from DataURL?
  6. Remember and Repopulate File Input [duplicate]
  7. How to download a file without using element with download attribute or a server?
  8. How to upload and list directories at firefox and chrome/chromium using change and drop events
  9. Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)
  10. Getting byte array through input type = file
  11. How to convert dataURL to file object in javascript?
  12. How FileReader.readAsText in HTML5 File API works?
  13. Convert base64 png data to javascript file objects
  14. Writing file to desktop using HTML5 FileSystem API
  15. Adding UTF-8 BOM to string/Blob
  16. Large file upload with WebSocket
  17. Create thumbnail from video file via file input
  18. Reading multiple files with Javascript FileReader API one at a time
  19. How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?
  20. JavaScript: Inline Script with SRC Attribute?
  21. Getting the return value of Javascript code in Selenium
  22. How to split comma separated string using JavaScript? [duplicate]
  23. Concatenate two JSON objects
  24. Why are await and async valid variable names?
  25. Opening new window in HTML for target=”_blank”
  26. Uncaught TypeError: Object.values is not a function JavaScript
  27. Global data with VueJs 2
  28. Can I remove just the popup bubbles of POI’s in Google Maps API v3?
  29. Ember.js and RequireJS
  30. What is the purpose of the delete operator in Javascript?

Leave a Comment