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>
<link rel="stylesheet" href="jquery-ui.min.css"> <link rel="stylesheet" href="imagenes.css"> <div class="block-preview"> <img id="img-preview" src="imagen.jpg" alt=""> <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> <img id="img-org" src="imagen.jpg" alt="">
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