Codice da zero un ritaglio di immagine AND resizer (allo stesso tempo) in jQuery/javascript?

Question

Stiamo codificando un ridimensionatore di immagini Javascript (jQuery) piuttosto semplice &. Fondamentalmente, per ora, solo le funzionalità necessarie sono in effetti coltura e ridimensionare.

mi sono state controllando alcuni plugin jQuery come JCrop ecc e sembra non ci sono plugin che fanno entrambi cose allo stesso tempo. Un sacco di croppers O resettatore, ma non le due funzioni contemporaneamente con una stessa immagine "naturale". Con naturale voglio dire che esempi come questo (in basso a destra), non sono molto bello visivamente per gli utenti:

http://jsfiddle.net/opherv/74Jep/33/

Anche se credo che questo sarebbe un possibile strada da percorrere per avere le due funzioni allo stesso tempo. Anche se è possibile vedere questo esempio zoom fin troppo al momento ed è qualificato come utilizzare "brutti hack" dall'autore stesso per farlo:

function changeZoom(percent){ 
    var minWidth=viewport.width(); 
    var newWidth= (orgWidth-minWidth)*percent/100+minWidth; 
    var newHeight= newWidth/orgRatio; 
    var oldSize=[img.width(),img.height()]; 

    img.css({ width: newWidth+"px", height: newHeight+"px" }); 

    adjustDimensions(); 

    //ugly hack :(
    if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){ 
     img.css({ left: dragcontainer.width()-img.width() +"px" }); 
    } 
    if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){ 
     img.css({ top: dragcontainer.height()-img.height() +"px" }); 
    } 
} 

Stiamo piuttosto cercando il possibilty di utilizzare un telaio Cropper/zona (come vediamo più spesso sul web) + un'opzione zoom/de-zoom sull'immagine (maniglie sul bordo dell'immagine ad esempio)

Poiché abbiamo solo bisogno di quelle due funzioni abbiamo pensato che avremmo code questo da zero o quasi come non vogliamo aggiungere altri file javascript/plug-in che saranno comunque eccessivi con molte altre funzionalità che non avremo bisogno (almeno per ora). ci è una difficoltà specifica a cercare di codificare la visualizzazione di un'immagine ri-considerevole da maniglie semplici & croppable da una selezione di trama/zona (che potrebbe anche essere ri-considerevole propria e:

La domanda è trascinabile in modo che un utente possa sintonizzare quale parte dell'immagine desidera)?

Stiamo decisamente meglio separando le due funzioni?

Grazie mille per il vostro aiuto.

Answer 1

Ho provato questo plugin ??

http://code.google.com/p/resize-crop/

Non sia ritagliare e ridimensionare