在jQuery/javascript中从头开始编写图像裁剪器和大小调整器（同时）？

我们正在编写一个相当简单的Javascript（jQuery）图像裁剪器和大小调整器。基本上，目前只需要裁剪和调整大小等功能

我一直在检查一些jQuery插件，比如JCrop等，似乎没有插件同时做这两件事。大量裁剪器或大小调整器，但不能同时在同一“自然”图像视图上显示这两个功能。我的意思是，像这样的例子（右下角）在视觉上对用户来说不是很好：

虽然我想这可能是同时拥有这两个特性的一种方式。尽管您可以看到这个示例目前只进行了缩放，并且作者自己使用了“丑陋的黑客”来进行缩放：

我们更希望在图像上使用裁剪框/区域（我们在web上看到的最多）+缩放/取消缩放选项（例如图像边界上的手柄）

因为我们只需要这两个功能，所以我们认为我们应该从头开始编写代码，或者几乎是因为我们不想添加其他javascript文件/插件，因为这些文件/插件与我们不需要的其他功能打包在一起（至少目前是这样），会有过多的杀伤力

问题是：尝试编码图像显示时是否存在特定困难，该图像可通过简单的手柄重新调整大小，并可通过帧/区域选择进行裁剪（也可自行重新调整大小并拖动，以便用户可以微调图像的哪个部分）

我们是否确实更好地分离这两个功能

非常感谢您的帮助。

尝试了这个插件

---

它可以裁剪和调整大小

是否需要在特定的浏览器中查看您的小提琴？@Asad我不知道。。我一直在使用Firefox16，它在Chrome上似乎也能像预期的那样工作……我想他是说你在为谁做这个？例如，如果你的目标是普通大众，你也必须处理IE。。。那么不，@Asad我们可以特别要求使用Firefox或Chrome，例如，因为它是一种管理功能。

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