HTML5 Canvas drawImage ratio error iOS

Quiero cambiar el tamaño de la imagen tomada desde la cámara iOS en el lado del cliente con HTML5 Canvas, pero sigo ejecutando este extraño error en el que la imagen tiene una proporción incorrecta si es mayor que ~ 1.5 m

Funciona en el escritorio, pero no en la última versión de iOS con la API de carga de medios.

Puedes ver un ejemplo aquí:http://jsbin.com/ekuros/1

¿Alguna idea de cómo arreglar esto por favor? ¿Es este un problema de memoria?

$('#file').on('change', function (e) {
    var file = e.currentTarget.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var image = $('<img/>');
        image.on('load', function () {
            var square = 320;
            var canvas = document.createElement('canvas');

            canvas.width = square;
            canvas.height = square;

            var context = canvas.getContext('2d');
            context.clearRect(0, 0, square, square);
            var imageWidth;
            var imageHeight;
            var offsetX = 0;
            var offsetY = 0;

            if (this.width > this.height) {
                imageWidth = Math.round(square * this.width / this.height);
                imageHeight = square;
                offsetX = - Math.round((imageWidth - square) / 2);
            } else {
                imageHeight = Math.round(square * this.height / this.width);
                imageWidth = square;    
                offsetY = - Math.round((imageHeight - square) / 2);            
            }

            context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
            var data = canvas.toDataURL('image/jpeg');

            var thumb = $('<img/>');
            thumb.attr('src', data);
            $('body').append(thumb);
        });
        image.attr('src', e.target.result);
    };
    reader.readAsDataURL(file);
});