代碼從頭開始圖像裁剪和resizer（在同一時間）在jQuery/JavaScript？

Question

我們正在編寫一個相當簡單的Javascript（jQuery）圖像裁剪器& resizer。基本上，現在只需要功能作物和調整大小。

我已經檢查了幾個jQuery插件像JCrop等，似乎沒有插件在同一時間做都事情。很多收割機或 resizer，但不是在同一個「自然」圖像視圖上的兩個功能。通過自然我的意思是這樣的（右下）的例子是不是很漂亮直觀的用戶：

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

雖然我想這將是一個可能的路要走必須在同一時間兩個特徵。雖然你可以看到，這個例子只放大也是目前並限定爲使用「醜陋的黑客」作者自己這樣做：

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

我們寧願尋找possibilty使用栽跟頭框架/區域（正如我們在網上最常看到的那樣）+圖像上的縮放/縮小選項（例如，圖像邊框上的手柄）

由於我們只需要這兩個功能，我們認爲我們會從頭開始編寫代碼或者幾乎不需要添加其他JavaScript文件/插件，無論如何，這些文件都會被我們不需要的其他功能（至少現在）擠滿。

的問題是：在那裏在試圖代碼的圖像的顯示重新相當大的通過簡單的把手&由幀/區選擇（這也將被重新可觀自身和croppable特定困難可以拖動以便用戶可以微調他想要的圖像的哪個部分）？

我們絕對會更好地分離這兩個功能嗎？

非常感謝您的幫助。

Answer 1

試過這個插件？

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

它農作物和調整