javascript - 在jQuery/javascript中从头开始编写图像裁剪器和缩放器的代码？

我们正在编写一个相当简单的Javascript(jQuery)图像裁剪器和缩放器。基本上，到目前为止，仅需要的功能确实是作物和调整大小。

我一直在检查一些jQuery插件(例如JCrop等)，而且似乎没有插件同时在做和两件事。很多裁剪器或调整大小，但不是同一时间在同一“自然”图像 View 上的两个功能。自然地，我的意思是这样的示例(右下)对于用户而言在视觉上不是很好:

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文件/插件，而这些JavaScript文件/插件无论如何都将与其他功能打包在一起，这是多余的(至少到目前为止) 。

问题是:在尝试对通过简单的手柄可重新调整大小并通过帧/区域选择进行裁剪的图像的显示进行编码时有一个特殊的困难(它本身也可以重新调整大小，并且可以左右拖动)。用户可以微调他想要的图像的哪一部分)？

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

非常感谢你的帮助。

最佳答案

尝试了这个插件？

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

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