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

Question

我们正在编写一个相当简单的Javascript(jQuery)图像裁剪器和缩放器.基本上,目前,只需要的功能确实是裁剪和调整大小.

我一直在检查一些像JCrop等jQuery插件,似乎没有插件同时做这两件事.很多裁剪器或缩放器,但不是同一个"自然"图像视图上的两个功能.我觉得这样的例子(右下角)对于用户而言视觉上并不是很好:

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

我们正在寻找使用裁剪器框架/区域(我们在网络上最常见)的可能性+图像上的缩放/缩小选项(例如图像边框上的手柄)

由于我们只需要这两个功能,我们认为我们会从头开始编写代码,或者几乎因为我们不想添加其他javascript文件/插件,这些文件/插件无论如何都会被包装其他我们不需要的功能(至少目前为止) .

问题是:是否存在特定的困难,试图通过简单的手柄对图像的显示进行编码,并通过框架/区域选择进行缩放(也可以自行调整尺寸并可拖动,以便用户可以微调他想要的那部分图像？

我们肯定更好地分离这两个功能吗？

非常感谢你的帮助.

Answer 1

试过这个插件吗？？

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

它既可以裁剪也可以调整大小