拖动图像以调整位置，如 facebook 缩略图个人资料图片答案

【问题标题】：Drag the image to adjust position like in facebook thumbnail profile picture拖动图像以调整位置，如 facebook 缩略图个人资料图片
【发布时间】：2012-07-28 19:06:16
【问题描述】：

在 facebook 中，缩略图会遗漏整张图片的某些部分，我们可以移动它，这样我们就可以使缩略图适合首选位置，如何使用网络技术做到这一点。

在示例中，我们可以拖动图像来移动缩略图的位置。

【问题讨论】：

你的意思是用药物切割图像的特定部分，这些部分将用作你的缩略图
需要一个例子来给出更好的答案，可能看看 imageresizing.net 他们有一些好东西用于图像处理
请稍等..我现在就制作图像。
请检查我的答案，我想这正是你要找的

标签： javascript jquery asp.net web-applications

【解决方案1】：

这正是您所需要的：http://github.com/matiasgagliano/guillotine

此外，它还支持缩放、旋转、触摸设备，并且完全响应。

演示：http://matiasgagliano.github.io/guillotine

【讨论】：

【解决方案2】：

我一直在寻找一种完全相同的插件，找不到，所以我写了一个:)。看看这个。它非常基本，功能不多，但仍然有用。好好使用它，传播它，也感谢我；）

编辑：2013 年 12 月 22 日

我注意到使用百分比的版本没有按预期工作。链接已更新。

我还添加了 X 轴版本

JSFiddle (Y-Axis)

JSFiddle (X-Axis)

【讨论】：

你好 Ergec，你很久以前就做过了，但这正是我需要的，所以谢谢。一个简单的问题，它似乎只是沿着 y 轴（垂直）移动图像，我如何让它水平工作（即对于比 #mask 更宽的图像）？我一直在通过改变 .mask 宽度来玩小提琴，但这似乎不起作用。谢谢。
谢谢@ergec，好东西。我做了不可思议的事情并将两者结合起来，以允许在两个轴上一起拖动看到这里jsfiddle.net/ObiOne86/QQMq3你的想法......？也许您也可以将其包含在您的答案中。再次感谢。
@ObiOnuorah 仍然存在故障，但请记住 xy 轴更棘手。由于您不适合宽度或高度，因此您必须让用户适合整个图像，并且您只能通过像 pixelzdesign.com/blog_view.php?id=59 那样实现调整大小/裁剪功能、坐标、裁剪宽度/高度来做到这一点。我做的是最简单的方法；）

【解决方案3】：

您可以尝试类似jquery plugin 的方法。它与 Facebook 不同，但提供了可控的裁剪功能。

否则问题已经在这里回答了：Is there a jQuery image cropping plugin similar to Facebook's image crop?

编辑：试试这个：imgareaselect。

【讨论】：

实际上不是裁剪，是移动