[SOLUCIONADO] Calcular coordenadas sobre imagen redimencionada

Nemutagk · #1 (**permalink**) 12/06/2015, 14:17

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:

Ver original<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:

Ver original<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:

Ver original$(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:

Ver original$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

Nemutagk · #2 (**permalink**) 13/06/2015, 11:05

Después de despejarme y aclarar ideas me di cuenta que estaba completamente mal planteado, no debía obtener el porcentaje de reducción de la imagen reedimencionada con respecto a la original, lo que tenia que hacer es calcular cual es el porcentaje de coordenadas referente a la imagen, por ejemplo, si tengo una posición (top: 10px left:255px) sobre una imagen que mide (width: 1200 height: 650) tendría los siguientes porcentajes (top: 1.538461538461538% left: 21.25%), ojo, que son importantes todos los decimales para tener la mayor precisión posible, entonces tendría que calcular la misma posición en la original usando los porcentajes de la miniatura, para que se entienda mejor dejo el código que generé en un archivo de pruebas

HTML

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <link rel="stylesheet" href="imagenes.css">
    <script src="jquery-2.1.3.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="imagen.js"></script>
</head>
<body>
<div class="block-preview">
    <img id="img-preview" src="imagen.jpg" alt="">
    <div class="div-cut"></div>
</div>
<div class="block-info">
    <p>coordenadas preview: <input type="text" id="coord-prev"></p>
    <p>coordenadas original: <input type="text" id="coord-org"></p>
    <p>tamaño del recuadro: <input type="text" id="size-cut"></p>
</div>
<div class="block-org">
    <img id="img-org" src="imagen.jpg" alt="">
    <div class="div-cut"></div>
</div>
</body>
</html>

Javascript

Código Java:

Ver original$(document).on('ready',function() {
 
    //posicionamos el primer bloque
    var offset = $('#img-preview').offset();
    console.log('offset view x:'+offset.top+' y:'+offset.left);
    $('.block-preview .div-cut').offset({"top":offset.top,"left":offset.left});
 
    var position = $('#img-preview').position();
    console.log('position view x:'+position.top+' y:'+position.left);
    $('#coord-prev').val('x:'+position.top+' y:'+position.left);
 
    //posicionamos el segundo bloque
    var offsetOrg = $('#img-org').offset();
    console.log('offset org x:'+offsetOrg.top+' y:'+offsetOrg.left);
    $('.block-org .div-cut').offset({"top":offsetOrg.top,"left":offsetOrg.left});
 
    var positionOrg = $('#img-org').position();
    $('#coord-org').val('x:'+positionOrg.top+' y:'+positionOrg.left);
 
    var posX, posY;
 
    //tamaño de crop
    var porSizeCut = (($('.block-preview .div-cut').width() * 100) / $('#img-preview').width());
    setSizeCrop(porSizeCut);
 
    $('.block-preview .div-cut').draggable({
        containment: $('#img-preview'),
        stop: function(event,ui) {
            posX = ui.position.top - position.top;
            posY =  ui.position.left - position.left;
 
            posX = ui.position.top;
            posY = ui.position.left;
 
            setCoords(posX,posY);
        }
    }).resizable({
        aspectRatio: true,
        maxWidth: $('#img-preview').width(),
        maxHeight: $('#img-preview').height(),
        stop: function(event, ui) {
            console.log('new size cut '+ui.size.width);
            porSizeCut = ((ui.size.width * 100) / $('#img-preview').width()); 
            setSizeCrop(porSizeCut);
        }
    });
});
 
function setCoords(arriba,derecha) {
    //fix padding
    arriba = arriba - 5;
    derecha = derecha - 5;
    $('#coord-prev').val('arriba: '+arriba+' derecha: '+derecha);
    //porcentajes de view
    var widthView = $('#img-preview').width();
    var heightView = $('#img-preview').height();
    console.log('size ancho: '+widthView+' alto:'+heightView);
 
    var porViewAncho = 100 - (derecha * 100) / widthView;
    var porViewAlto = 100 - (arriba * 100) / heightView;
    console.log('por view ancho:'+porViewAncho+' alto:'+porViewAlto);
 
    //porcentajes orig
    var inputImg = document.getElementById('img-org');
    var widthOrg = inputImg.naturalWidth;
    var heightOrg = inputImg.naturalHeight;
    console.log('size ancho: '+widthOrg+' alto'+heightOrg);
 
    var porOrgAncho = widthOrg - ((widthOrg * porViewAncho) / 100);
    var porOrgAlto = heightOrg - ((heightOrg * porViewAlto) / 100);
    console.log('coord org ancho:'+porOrgAncho+' alto:'+porOrgAlto);
 
    $('#coord-org').val('arriba: '+porOrgAlto+' derecha: '+porOrgAncho);
    $('.block-org .div-cut').css({"top":porOrgAlto,"left":porOrgAncho});
}
 
function setSizeCrop(size) {
    console.log('cut view por '+size);
    var porOrg = 10;
 
    var inputImg = document.getElementById('img-org');
    var widthOrg = inputImg.naturalWidth;
 
    var size = ((widthOrg * size) / 100) + 'px';
    $('#size-cut').val(size);
    $('.block-org .div-cut').css({"width":size,"height":size});
}

CSS

Código CSS:

Ver originalbody .block-preview {
    width: 700px;
    border: solid 1px #C2C2C2;
    padding: 5px;
    position: relative;
    overflow: auto;
    float: left;
}
 
body .block-preview img {
    width: 400px;
}
 
body .block-info {
    width: 619px;
    text-align: right;
    border: solid 1px #C2C2C2;
    float: right;
}
 
body .block-info input {
    width: 450px;
    padding: 5px;
}
 
body .block-preview .div-cut {
    width: 160px;
    height: 160px;
    border: solid 1px #FF0000;
    position: absolute;
    top: 0px;
    left: 0px;
}
 
body .block-org {
    border: solid 1px #C2C2C2;
    margin: 10px 0px 0px 0px;
    padding: 5px;
    position: relative;
    clear: both;
    overflow: auto;
}
 
body .block-org .div-cut {
    width: 240px;
    height: 240px;
    border: solid 1px #FF0000;
    position: absolute;
    top: 0px;
    left: 0px;
}

Solo, ojo, la imagen original debe mostrarse en su tamaño original, sin ser redimencionada por css o por el contenedor de la imagen, si no, la posición del recuadro rojo no será correcta

Actualización: eh incluido los cálculos para determinar el tamaño del recuadro rojo coincida en ambas imagenes