我们正在编写一个相当简单的 Javascript (jQuery) 图像裁剪器和调整器。基本上,就目前而言,真正需要的功能确实是crop和resize。
我一直在检查一些 jQuery 插件,如 JCrop 等,似乎没有插件同时做这两件事。许多裁剪器或调整器,但不是同一“自然”图像视图上的两个功能同时。自然,我的意思是像这样的例子(右下)在视觉上对用户来说不是很好:
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 文件/插件,因为这些文件/插件与我们不需要的其他功能一起打包(至少现在) .
问题是:在尝试对通过简单的句柄重新调整大小的图像的显示进行编码并通过框架/区域选择进行裁剪时是否存在特定的困难(它也可以自行调整大小并且可以拖动,以便用户可以微调他想要的图像的哪一部分)?
我们肯定更好地将这两个特征分开吗?
非常感谢你的帮助。