Resize Image using Javascript

by Shah Danial

HTML

<input id="imageFile" type="file" onchange="ResizeImage()"><!--<input type="button" value="Resize Image"  onclick="ResizeImage()"/>--> 
<br/><br/>

<div id='hiddendata'>
<img src='' class='thumbdata' id='0' data-height='500' data-width='658' />
<img src='' class='thumbdata' id='1' data-height='309' data-width='658' />
<img src='' src='' class='thumbdata' id='2' data-height='110' data-width='110' />
<img src='' class='thumbdata' id='3' data-height='75' data-width='100' />
<img src='' class='thumbdata' id='4' data-height='72' data-width='72' />
</div>

JavaScript

function ResizeImage() {
    var filesToUpload = document.getElementById('imageFile').files;
    var file = filesToUpload[0];
    var fileType = file["type"];
    var ValidImageTypes = ["image/gif", "image/jpeg", "image/png", "image/gif"];
    if ($.inArray(fileType, ValidImageTypes) < 0) {
    alert('Your file is not Image file!');
    } else {
    // Create an image
    var img = document.createElement("img");
    // Create a file reader
    var reader = new FileReader();
    // Set the image once loaded into file reader
    reader.onload = function(e) {
            img.src = e.target.result;

            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas>", {"id":"testing"})[0];
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
            
            $('.thumbdata').each(function(i, obj) {
            var IDS = document.getElementById(i);
            var DATA_WIDTH = IDS.dataset.width;
            var DATA_HEIGHT = IDS.dataset.height;
            var MAX_WIDTH = DATA_WIDTH;
            var MAX_HEIGHT = DATA_HEIGHT;
            var width = img.width;
            var height = img.height;

            if (width > height) { //----- HORIZONTAL ------
 
                if (MAX_WIDTH < width) {
                //alert('1');
                var finalwidth = MAX_WIDTH;
                } else {
                //alert('2');
                var finalwidth = width;
                }
                
                var AR = width / height;
                var finalheight = finalwidth / AR;
                
            } else {              //----- VERTICAL ------
            
                if (MAX_HEIGHT < height){
                var finalheight = MAX_HEIGHT; 
                //alert('3');
                } else {
                var finalheight = height;
                //alert('4');
                }
                var RA = height / width;
                var finalwidth = finalheight / RA;
      ...