我们正在编写一个相当简单的Javascript (jQuery)图像裁剪器和大小器。基本上,就目前而言,只需要和调整大小的特性。
我一直在检查一些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文件/插件(无论如何,这些文件/插件)都会被打包到我们不需要的其他特性中(至少目前是这样)。
的问题是:用简单的句柄对图像的显示进行编码有什么特殊的困难吗?通过一个框架/区域选择(它本身也是可重放的,这样用户就可以微调他想要的图像的哪一部分)?
我们是否可以更好地将这两个特性分开呢?
非常感谢你的帮助。
发布于 2012-12-19 23:44:23
https://stackoverflow.com/questions/13930239
复制