El problema es que a la mayoría (facebook, tuenti...) solo nos dejan seleccionar una sección cuadrada fija y muchas veces no se corresponde con lo que queremos.
Con jQuery y Jcrop podemos realizar selecciones más precisas de la siguiente manera.
<html>
<head>
<script src="jquery.pack.js"></script>
<script src="jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="/css/jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
jQuery(function(){ jQuery('#cropbox').Jcrop(); });
jQuery('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
function updateCoords(c){
jQuery('#x').val(c.x);
jQuery('#y').val(c.y);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
</script>
</head>
<body>
<img src="flowers.jpg" id="cropbox" />
</body>
</html>
En c.x y c.y tendremos las coordenadas dónde comienza la selección y en c.w y c.h el ancho y el alto.
Una vez que sabemos exactamente la selección del usuario se puede recortar la imagen o etiquetar cada zona.
0 comentarios:
Publicar un comentario