0

I'm trying to resize an image before it is previewed using Jquery. While I am able to preview the image and know more or less how to resize it (can't implement it yet, been reading SO), I have difficulty getting the image's width and height. This is my code for now:

<img src="" alt="image" class="image">
<form method="post" action="" enctype="multipart/form-data" class="form">
    <input type="file" class="file">
    <input type="submit" class="submit" value="Submit">
</form>

Here's my Jquery:

function preView(input) {
      var reader = new FileReader();

      reader.onload = function (e) {
         $('.image').attr('src', e.target.result);
         }
     reader.readAsDataURL(input.files[0]);
}

$('.file').change(function () {
    preView(this);
});

My problem is: how do I get the size of the image previewed?

I have tried this:

var image = new Image();
image.src = e.result;
var width = image.width;

But this doesn't work (Image function does not show up in my available functions).

I know how to check the size and file type but I can't get width nor height. Does anyone have any ideas how I could get them?

davidb
  • 1,503
  • 4
  • 30
  • 49
  • That's for getting the size, for resizing read [this](http://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly) and [that](http://stackoverflow.com/questions/27122713/resize-image-using-javascript). – skobaljic Sep 26 '16 at 21:12
  • I've seen and tried that but as I said, `var image = new Image();` doesn't work in my case. I don't know why though. Is this Jquery or JS? – davidb Sep 26 '16 at 21:12

0 Answers0