Image resize on IPhone 5 using JavaScript Canvas

Question

I need to resize an image when I take a picture with the camera or if I select an image stored in phone (one or more images). The code above works on iPhone 4s (with iOS 6 and 7), Nexus 5, Galaxy Tab Plus P6200L and Motoroza RAZR XT910. When I try send an image using iPhone 5 (iOS 7) something happens that the image height get distorted. For example: if the original image height has 600px when I store the image in database and show it in a report the image get 100px (and I don't know why). The images are stored in SQL Server 2008 R2.

Code to generate the thumbs (after take a photo or select picture stored on the phone):

var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
       if (!f.type.match('image.*')) {
          continue;
       }

       var reader = new FileReader();

       // Closure to capture the file information.
       reader.onload = (function (file) {
          return function (e) {
            var span = document.createElement('span');
            span.id = 'span' + escape(file.name.split('.')[0]);
            $(span).css("position", "relative");
            $(span).css("display", "block");
            $(span).css("float", "left");

            //the class thumb rezise images
            span.innerHTML = ['<img class="thumb"', 'id="', escape(file.name.split('.')[0]), '" src="', e.target.result,
                        '" title="', escape(file.name), '"/>'].join('');

            span.innerHTML += ['<img class="revomeImg" id="img', escape(file.name.split('.')[0]), '" src="/Content/images/Siasso/remove.jpg" title="', escape(file.name), '")/>'].join('');

            document.getElementById('list').insertBefore(span, null);
            $("#img" + escape(file.name.split('.')[0])).click(function () {
                $("#span" + escape(file.name.split('.')[0])).remove();
            });
        };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
   }

Code to upload send image to server. I'm using JQuery validade and I execute the upload inside submitHandler

submitHandler: function (ev) {

    //getParameters is a method that generante JSON to send to controller. It gets the value of all elements in the page (ex: value from a dropdownlist).
    var _parameters = getParameters();

    var base64Image = new Array();
    base64Image = $("#list").find('.thumb').each(function (index, value) {
        var imageArray = new Array();
        for (var i = 0; i < index; i++) {
            imageArray[i] = $(value).attr('src');
        }
        return imageArray;
    });

    var i = 0;
    var imageArray = new Array();

    //Here I put each image (converted to base64) in an array. I send this images to controller and convert to binary to store in sql server

    $(base64Image).each(function (index, value) {
        //console.log("teste:" + value.src);

        //rezise image
        var newimg = new Image();
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");

        newimg.src = value.src;

        var ratio = 1;
        if (newimg.width > 800)
            ratio = 800 / newimg.width;
        else if (newimg.height > 600)
            ratio = 600 / newimg.height;

        canvas.width = newimg.width * ratio;
        canvas.height = newimg.height * ratio;
        ctx.drawImage(newimg, 0, 0, canvas.width, canvas.height);
        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        ctx.putImageData(imgData, 0, 0);

        var img = new Image();
        img.src = canvas.toDataURL("image/jpeg");

        imageArray[i] = img.src;
        i++;
    });

    _parameters.imageBase64Array = imageArray; //add images (base64 code) in the json to send to controller

   $.ajax({
        type: 'POST',
        url: window.newEvent,
        data: JSON.stringify(_parameters),
        contentType: "application/json",
        success: function (data, id) {
            alert($("#siassoIndex_eventType :selected").text() + ' stored. ' + $("#siassoIndex_eventType :selected").text() + " number " + data.EventId + "");
            location.reload();
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(JSON.parse(xhr.responseText).ErrorMessage);
        }
    });

    return false;
}

}