从头开始编码jQuery/javaScript中的图像Cropper和Resizer(同时)

Question

我们正在编码一个相当简单的JavaScript（jQuery）Image cropper＆amp;resizer。基本上，目前，仅需要的功能确实是 crop 和 ress 。

我一直在检查一些诸如jcrop等的jQuery插件。似乎没有插件可以同时同时。许多裁剪或 resizer，而不是同时同一"自然"图像视图上的两个功能。我的意思是，这样的示例（右下）对用户而言不是很好：

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

尽管我想这是同时拥有这两个功能的一种可能的方法。尽管您目前也只能看到此示例也只有缩放，并且它被作者本人使用使用"丑陋的hacks" 。

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

我们宁愿寻找使用农作物框架/区域的可能性（正如我们在网络上最常看到的那样） 图像上的Zoom/de-Zoom选项（例如，在图像的边界上处理）

由于我们只需要这两个功能，因此我们认为我们会从头开始编写编码，或者几乎不想添加其他JavaScript文件/插件，无论如何，这些文件/插件都会与我们不需要的其他功能包装好（至少目前）。

问题是：试图通过直接句柄重新定义图像的显示时存在特定的困难。可以通过框架/区域选择裁剪（它也可以单独重新固定并在周围拖动，以便用户可以微调他想要的图像的哪一部分）？

？

我们绝对可以更好地分开这两个功能？

非常感谢您的帮助。

Answer 1

尝试了此插件??

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

它同时进行作物和调整大小