Link to home
Avatar of Michael Vasilevsky
Michael VasilevskyFlag for United States of America

asked on

How to Resize an Image on Upload with JavaScript

I'm trying to resize a photo on upload using JavaScript but can't get it. I'm using the below code (also here). I want to resize any photo to a maximum size of 800x600.

The commented out
reader.readAsDataURL(resizeMe(input.files[0]));

Open in new window

is what I want to work:

<input id="getFile" type="file" accept="image/*"/>
<img class="pic" src="" />

<script>
var readURL = function(input) {
  if (input.files[0]) {
    var reader = new FileReader();

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

$("#getFile").on('change', function(){
  readURL(this);
});

function resizeMe(file) {
    var dataURL = "x";
    var reader = new FileReader();
    reader.onloadend = function () {

        var tempImg = new Image();
        tempImg.src = reader.result;
        tempImg.onload = function () {

            var MAX_WIDTH = 800;
            var MAX_HEIGHT = 600;
            var tempW = tempImg.width;
            var tempH = tempImg.height;
            if (tempW > tempH) {
                if (tempW > MAX_WIDTH) {
                    tempH *= MAX_WIDTH / tempW;
                    tempW = MAX_WIDTH;
                }
            } else {
                if (tempH > MAX_HEIGHT) {
                    tempW *= MAX_HEIGHT / tempH;
                    tempH = MAX_HEIGHT;
                }
            }

            var canvas = document.createElement('canvas');
            canvas.width = tempW;
            canvas.height = tempH;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, tempW, tempH);
            dataURL = canvas.toDataURL("image/jpeg");
        };

    };
    
    reader.readAsDataURL(file);

    return dataURL;
}
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Michael Vasilevsky

ASKER

Perfect! Thank you