Kod od podstaw obrazka i ORAZ resizer (w tym samym czasie) w jQuery/javascript?

Question

Kodujemy raczej prosty program do edycji obrazów JavaScript (jQuery) o rozmiarze &. Zasadniczo, na razie tylko potrzebne funkcje są w rzeczywistości przycinanie i zmiana rozmiaru.

byłem sprawdzeniu kilku wtyczek jQuery jak JCrop itp i wydaje się, nie ma żadnych wtyczek robi zarówno rzeczy w tym samym czasie. Mnóstwo hakerów OR resizer, ale nie dwie funkcje w tym samym "naturalnym" widoku obrazu w tym samym czasie. Przez naturalne To znaczy, że przykłady jak to (prawy dolny róg) nie są bardzo ładne wizualnie dla użytkowników:

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

Chociaż myślę, że byłoby to możliwe do zrobienia, aby mieć dwie funkcje w tym samym czasie. Chociaż można zobaczyć przykład powiększa nazbyt obecnie i jest zakwalifikowany jako używając „brzydkich hacków” przez samego autora, aby to zrobić:

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" }); 
    } 
} 

Jesteśmy raczej szuka uwzględnieniem możliwości wykorzystania ramki żniwiarz/strefa (jak widzimy najczęściej w Internecie) + opcja powiększania/pomniejszania obrazu (na przykład obsługuje obramowanie obrazu)

Ponieważ potrzebujemy tylko tych dwóch funkcji, myśleliśmy, że koduj to od zera lub prawie tak, jak nie chcemy dodawać innych plików/wtyczek javascript, które będą przesadzone i tak zapełnione innymi funkcjami, których nie będziemy potrzebować (przynajmniej na razie). tam jest specyficzna trudność przy próbuje zakodować wyświetlanie obrazu ponownie spory o prostych uchwytów & croppable przez wybór ramki/strefy (które również ponownie spory we własnym zakresie i:

Pytanie brzmi można przeciągnąć, aby użytkownik mógł dostroić część obrazu, który chce)?

Czy zdecydowanie lepiej oddzielić te dwie funkcje?

Bardzo dziękuję za pomoc.

Answer 1

Próbowałem tej wtyczki ??

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

Robi zarówno upraw i rozmiaru