inquadra e ritaglia immagine

**8matt5** · 07-03-2009, 14:05

Ciao a tutti.

Il mio sito di turno deve elaborare delle immagini caricate dall'utente. Queste immagini dopo essere state caricate dovrebbero essere ritagliate in modo che abbiano un rapporto larghezza/altezza fisso. Inoltre questa operazione deve eseguita automaticamente.

Non conoscendo l'immagine che viene caricata potrebbe capitare che il soggetto raffigurato non sia esattamente al centro e quindi nell'operazione di ritaglio potrebbe venirne tagliata una parte.

Avrei bisogno quindi di mettere a disposizione dell'utente un controllo che gli lasci la possibilità di inquadrare il soggetto all'interno di una selezione con larghezza e altezza fissi.
-magari anche ridimensionabili, l'importante è che il rapporto lar/alt rimanga costante-

Se qualcuno sa consigliarmi da dove partire o dove trovare qualche script...

Grazie in anticipo.

**cavicchiandrea** · 07-03-2009, 14:47

Che sappia io non puoi farlo con il solo javascript (per sicurezza ho fatto una ricerca che conferma la mia tesi http://forum.html.it/forum/showthread/t-854882.html) ho visto dei siti che fanno quello che cerchi in flash/actionscript ma non saprei dirti se sono script/applicativi free

**8matt5** · 08-03-2009, 12:25

Per quanto riguarda ritagliare l'immagine lo faccio server-side ovviamente.

Ciò che mi serviva era un controllo che lasciasse decidere all'utente dove ritagliarla, poi io con i parametri che mi passa questo controllo faccio la chiamata server e ritaglio.

Ad esempio nell'immagine que sotto dovrei dare la possibilità all'utente di spostare il riquadro chiaro per inquadrare ciò che vuole.
Dopodichè quando preme un tasto di conferma chiama una pagina asp che prende come parametri la posizione e la dimensione del riquadro e tramite server effettua il ritaglio.

Il mio problema non è il ritaglio che lo so già fare, ma dare all'utente la possibilità di inquadrare ciò che vuole...

**Straystudios** · 08-03-2009, 14:01

Solo per dare un' idea dello Straystudio pensiero :

commenta con // la riga dell' alert
//alert(document.getElementById("area").style.margin Left+" \nL = "+L);

codice:

<html>
<head>
<script language="JavaScript"> 
<!--
var L = 0;

function moveRight(){
 L++;
 document.getElementById("area").style.marginLeft = L +"px"; 
 alert(document.getElementById("area").style.marginLeft+" \nL = "+L);
 }

// -->
</script>

</head>
<body>

<input value="=>" type="button" onClick='moveRight();'>


<div style="height: 100%; border: 1px solid black; 
     background-image: url(http://www.dija.it/public/tyler.jpg); background-repeat: no-repeat;">

 <div id="area" style="width: 270; height: 294; border: 2px dashed red;"></div>

</div>

</body>
</html>

Puoi recuoerare L come Integer o tenere il valore in pixel.

**8matt5** · 08-03-2009, 16:18

Grazie mille Straystudios, mi hai dato una bella idea!!

Tramite dei bottoni penso di riuscire a fare tutto ciò che mi serve, anche ad ingrandire il riquadro mantenendo il rapporto larghezza/altezza desiderato... poi passo alla pagina successiva margin-top, margin-left, width e height del div area e me la ritaglio server-side.

e direi che per ora è un buon passo avanti!

Ma se volessi riuscire a trascinare il riquadro con il mouse??

Quache idea?

**Straystudios** · 08-03-2009, 16:59

C'è anche quella possibilità con JS puoi gestire le coordinate x,y del puntatore sullo screen; ma cominciamo ad andare su una cosa che non potrei darti così sul momento.

Puoi anche fare un secondo pulsante =>> di spostamento maggiore (+10px/click).
Ma avevo anche realizzato un bel joystick con dei timer in passato; prova questo, e a trattenere il pulsante mezzo secondo ... :

codice:

var L = 0;

var TR;
var TRC;

function moveRight(){
 L++;
 document.getElementById("area").style.marginLeft = L +"px"; 
 TR=setTimeout('moveRightContinuos();', 500);
 }
function moveRightPlus(){
 L=L+10;
 document.getElementById("area").style.marginLeft = L +"px"; 
 TR=setTimeout('moveRightContinuos();', 500);
 }
function moveRightContinuos(){
 L++;
 document.getElementById("area").style.marginLeft = L +"px"; 
 TRC=setTimeout('moveRightContinuos();', 15);
 }

//i comandi nel BODY:

<input value="=>" type="button"  onmousedown='moveRight();' 
                                 onmouseup='clearTimeout(TR); clearTimeout(TRC);'>
<input value="=>>" type="button" onmousedown='moveRightPlus();' 
                                 onmouseup='clearTimeout(TR); clearTimeout(TRC); alert("stopped");'>

**8matt5** · 08-03-2009, 17:49

Spettacolo!!!

Lo sto mettendo a punto anche per ridimensionarlo e per evitare che oltrepassi i confini dell'immagine o vada fuori...

Però ho trovato un piccolo bug...

se io tengo premuto poi mi sposto dal pulsante e rilascio lui continua ad andare perchè l'evento onMouseUp non è più rilevato dal bottone ma da ciò che indico quando rilascio il mouse. Dovrei ricliccarci sopra e rilasciare il mouse sopra per fermarlo, quindi ho messo il clearTimeout anche onmouseout.

**8matt5** · 08-03-2009, 20:03

Ho fatto tutto!

Invece della funzione "Plus" ho messo un parametro per gestire il passo dello spostamento

Poi ho inserito anche il ridimensionamento e ho fatto in modo che riquadro non uscisse dai limiti dell'immagine!!

Ho inserito anche il pulsante conferma per vedere i parametri che mi restituiva.

E tutto funziona!!

Puoi vederlo qua

Un ultima cosa....
Quali sono gli oggetti che gestiscono il mouse dai quali potrei ottenerne la posizione?? Ho già in mente come fare per spostarlo col mouse!

Grazie mille dell'aiuto!!

Discussione: inquadra e ritaglia immagine

Strumenti discussione

Ricerca discussione

Visualizza

inquadra e ritaglia immagine

Permessi di invio