javascript - 在 jQuery/javascript 中从头编写图像裁剪器和缩放器(同时)？

Question

我们正在编写一个相当简单的 Javascript (jQuery) 图像裁剪器和缩放器。基本上，目前，真正需要的功能确实是crop 和resize。

我一直在检查一些 jQuery 插件，例如 JCrop 等，似乎没有插件同时执行两者。许多裁剪器或调整大小，但不是同一“自然” ImageView 上的两个功能同时出现。自然地，我的意思是像这样的例子(右下角)对于用户来说在视觉上不是很好:

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

我们宁愿寻找使用裁剪框/区域的可能性(正如我们在网络上最常看到的那样)+ 图像上的缩放/缩小选项(例如图像边框上的 handle )

因为我们只需要这两个功能，我们认为我们会从头开始编写代码，或者几乎因为我们不想添加其他 javascript 文件/插件，无论如何与我们不需要的其他功能一起打包(至少目前)。

问题是: 在尝试编写可通过直接 handle 调整大小和可通过帧/区域选择裁剪(也可调整大小)的图像显示时是否存在特定困难独立且可拖动，以便用户可以微调他想要的图像的哪一部分)？

我们是否确实更好地将这两个特征分开？

非常感谢您的帮助。

Answer 1

试过这个插件吗？？

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

它既裁剪又调整大小