裁剪图像的可见部分

Question

我有一个overflow:hidden的div，其中包含的图像（.draggable())通常比div大，我需要只获取图像的可见部分并将其发送到服务器端脚本并保存为新文件。所以我的问题是，如何才能获得那个可见的部分？

谢谢！

Answer 1

您有两个选项，具体取决于您在div中移动图像的方法，使用javascript将参数保存在输入中，并在提交时使用POST方法传递它们。

例如，您传递了图像的TOP和LEFT，并且您已经知道div的WIDTH和HEIGHT，所以如果左边是-375px，您知道应该将图像从375px裁剪为（375px + div的WIDTH）并且最重要的是。

更好的选择是使用这个漂亮的jQuery插件：

http://deepliquid.com/content/Jcrop.html

Answer 2

您应该查看图像的绝对顶部和左侧值，并将其与div的相同顶部和左侧进行比较，将差异与div宽度一起使用，并将所有这些数据发送到服务器端，您可以在其中裁剪图像通过其他一些程序/库。

Answer 3

解决方法是获取可拖动的x，y位置。您可以在div上使用.top（）和.left（）来获取该数据。然后，您应该使用顶部，左侧，宽度，高度数据将整个图像发送到服务器，然后将其裁剪到服务器端。

请注意，我认为可以使用 Canvas HTML5元素和一些棘手的javascript将其裁剪到客户端。