我有一个overflow:hidden
包含图像的 div (.draggable())
通常比 div 大,我只需要获取图像的可见部分并将其发送到服务器端脚本并另存为新文件。所以我的问题是,如何只得到那个可见部分?
谢谢!
您有两个选择,具体取决于您在 div 中移动图像的方法,使用 javascript 将参数保存在输入中,并在提交时使用 POST 方法传递它们。
例如,您传递图像的 TOP 和 LEFT,并且您已经知道 div 的 WIDTH 和 HEIGHT,因此如果左侧是 -375px,您知道应该将图像从 375px 裁剪为(375px + div 的 WIDTH),同样适用最佳。
更好的选择是使用这个不错的 jQuery 插件:
您应该查看图像的绝对顶部和左侧值,并将其与 div 的顶部和左侧进行比较,将差异与 div 宽度一起发送,并将所有这些数据发送到服务器端,您可以在服务器端通过其他方式裁剪图像程序/库。
解决方案是获取可拖动对象的 x,y 位置。您可以通过在您的 div 上使用 .top() 和 .left() 来获取该数据。然后,您应该将整个图像连同顶部、左侧、宽度、高度数据一起发送到您的服务器,并在服务器端对其进行裁剪。
请注意,我认为可以通过使用Canvas HTML5 元素和一些棘手的 javascript 将其裁剪到客户端。