Calcular coordenadas sobre imagen redimencionada

[Nemutagk]

Que tal compañeros, vengo a ustedes solicitando su valiosa ayuda, verán, tengo un problema, estoy generando una aplicación donde se subirá imágenes como avatares, pero como debe a ver un limite de tamañano lo que queremos es que si el usuario selecciona una imagen mayor al limite (160x160 pixeles) tengan opción para seleccionar un trozo de la imagen, hasta aquí todo bien, el problema se presenta cuando el usuario selecciona una imagen muy grande, por lo cual debo encajar la etiqueta img dentro del contenedor (un div), por lo cual la imagen esta a escala o x porcentaje mas chica de lo que es originalmente, y eh aquí el problema, intento calcular en base a las coordenadas selecionadas en la imagen mas pequeña para traspasar a la imagen original, pero, siempre obtengo un desface, y entre mas grande es la imagen mas grande el desface...

Todo se maneja en un formulario web y se maneja con Javascript, ajax y php, el formulario es el siguiente:

Código HTML:

<form method="post" action="/es/config/avatar" enctype="multipart/form-data" class="form-horizontal" id="avatar-form">
        <div class="form-group">
            <label class="label-control col-xs-10 col-sm-6" for="password">Contraseña actual</label>
            <div class="col-xs-10 col-sm-6">
                <input type="password" value="" name="password" class="form-control" id="avatar-pass">
            </div>
        </div>
        <div class="form-group">
            <label class="label-control col-xs-10 col-sm-6" for="avatar">Imagen</label>
            <div class="col-xs-10 col-sm-6">
                <button type="button" class="btn btn-primary" id="btn-avatar">ayanami_rei_neo...</button>
                <input type="file" name="avatar" class="form-control" id="avatar">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-10 col-sm-6 col-sm-offset-6">
                <input type="submit" value="Cambiar" class="btn btn-primary">
                <input type="hidden" value="jNQfAJJ9SkGsiA2LLefDEL3W2laWc6T2RI7dDzRB" name="_token">
                <input type="hidden" value="0|0" id="cropcoordinates" name="cropcoordinates">
                <input type="hidden" value="160" id="cropsize" name="cropsize">
                <input type="hidden" value="0|0" id="fix" name="fix">
            </div>
        </div>
    </form>
 

El contenedor de la imagen

Código HTML:

<div class="avatar-block">
    <img class="avatar img-responsive" src="/img/avatars/avatar.png" id="preview">
    <div id="divcut"></div>
</div>
 

Y este es el código javascript que tengo

Código Javascript:

$(document).on('ready',function() {
    $('#btn-avatar').on('click',function() {
        $('#avatar').click();
    });
 
    $('#avatar').on('change',function() {
        var path = $(this).val();
        var fileName = path.match(/[^\/\\]+$/);
        var inputFile = this;
 
        var name = fileName[0].slice(0,15);
        name += '...';
        $('#btn-avatar').text(name);
 
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
 
            reader.onload = function(e) {
                $('#preview').attr('src',e.target.result);
                setImage();
            };
 
            reader.readAsDataURL(inputFile.files[0]);
        }
    });
 
    $('#avatar-form').on('submit',function() {
        var form = this;
        var fileInput = document.getElementById('avatar');
        var file = fileInput.files[0];
 
        var formData = new FormData(form);
        formData.append('password',$('#avatar-pass').val());
        formData.append('avatar',file);
        formData.append('cropcoordinates',$('#cropcoordinates').val());
        formData.append('cropsize',$('#cropsize').val());
        formData.append('fix',$('#fix').val());
        formData.append('_token',$('input[name=_token]').val());
 
        $.ajax({
            url: $(this).attr('action'),
            data: formData,
            contentType: false,
            processData: false,
            method: 'post',
            cache: false
        }).done(function(data) {
            console.log('Enviado!');
            //$('#preview').attr('src',data);
        });
 
        return false;
    });
});
 
function setImage() {
    $('#divcut').show();
 
    $('#fix').val('0|0');
    $('#cropsize').val(160);
    $('#cropcoordinates').val('0|0');
 
    var position = $('#divcut').position();
 
    var imgWidth = $('#preview').width();
    var imgHeight = $('#preview').height();
    console.log('tamaño imagen x:'+imgWidth+' y:'+imgHeight);
 
    var img = document.getElementById('preview');
    var imgOrgWidth = img.naturalWidth;
    var imgOrgHeight = img.naturalHeight;
    console.log('tamaño original x:'+imgOrgWidth+' y:'+imgOrgHeight);
 
    var tmpFixTop = 0;
    var tmpFixLeft = 0;
    if (imgWidth < imgOrgWidth) {
        var tmpFixTop = (imgWidth  / imgOrgWidth) * 100;
        var tmpFixLeft = (imgHeight / imgOrgHeight) * 100;
    }
 
    if (tmpFixTop > 0 || tmpFixLeft > 0) {
        $('#fix').val(tmpFixTop+'|'+tmpFixLeft);
        console.log('fix: '+tmpFixTop+'|'+tmpFixLeft);
    }
 
    var imgPos = $('#preview').offset();
    console.log('offset x:'+imgPos.left+' y:'+imgPos.top);
    $('#divcut').offset({top:imgPos.top,left:imgPos.left});
    var position = $('#divcut').position();
 
    $('#divcut').draggable({
        containment: $('#preview'),
        stop: function(event, ui) {
            console.log('org coords x:'+ui.position.top+' y:'+ui.position.left);
            var tmpTop = ui.position.top - position.top;
            var tmpLeft = ui.position.left - position.left;
 
            console.log('coords x:'+tmpTop+' y:'+tmpLeft);
            $('#cropcoordinates').val(tmpTop+'|'+tmpLeft);
        }
    }).resizable({
        aspectRatio: true,
        maxWidth: imgWidth,
        maxHeight: imgHeight,
        stop: function(event, ui) {
            console.log('size:'+ui.size.width);
            $('#cropsize').val(ui.size.width);
        }
    });
}
 

La parte importante es la función setImage() la que calcula las coordenadas pero lo hace de forma erronea

El código PHP que recorta la imagen

Código PHP:

$image = Request::file('avatar');
        $size = Request::get('cropsize');
        list($fixLeft,$fixTop) = explode('|',Request::get('fix'));
        list($posLeft,$posTop) = explode('|',Request::get('cropcoordinates'));
 
        if ($image->isValid()) {
            $ext = $image->getClientOriginalExtension();
            $fileName = md5(time().rand(1000,9999)).'.'.$ext;
            $path = $_SERVER['DOCUMENT_ROOT'].'/img/avatars';
            $image->move($path,$fileName);
            $url = $path.'/'.$fileName;
 
            if ($fixTop > 0 || $fixLeft > 0) {
                if ($fixTop > 0)
                    $posTop = $posTop + (($fixTop * $posTop) / 100);
 
                if ($fixLeft > 0)
                    $posLeft = $posLeft + (($fixLeft * $posLeft) / 100);
 
                $size = $size + (($fixLeft * $size) / 100);
            }
            
            $objImage = new Image();
            $objImage->source($url);
            $objImage->crop($posTop,$posLeft,$size,$size);
            $objImage->save($url);
 

A ver si me pueden ayudar, cualquier información que requieran solo pregunten