是否有类似Facebook的图像裁剪的jQuery图像裁剪插件？
我知道有数以千计的jQuery插件用于图像裁剪，但我需要的是类似于Facebook的图像裁剪：图像上可拖动的固定尺寸正方形，或固定尺寸正方形下的可拖动图像。
我认为它有一个简单优雅的代码，而不是我到处都能找到的10k-50k图像处理框架。
我刚刚为你建立了一个如何用jQuery做的快速示例： http ： //jsfiddle.net/gCqJ4/这不是太难，你可以建立我的例子。 许可是麻省理工学院。
这里有一个基本的假设。 首先，您的图像预计已经上传; 这只是作物的一部分。 其次，图像具有data-id属性，该属性指定了服务器可以使用的图像的id。
我将在下面解释一下JS：
第一部分是典型的jQuery插件声明：
(function($) { $.fn.croppable = function(settings) { 然后我们采用一个可选的设置参数，带有一些理智的默认值（成功是你的匿名函数，用于处理成功的数据提交）：
settings = settings || { square: 50, default: 'middle', id: $(this).data("id"), success: null };
接下来只是基本的初始位置计算。
var position = { x: settings.default == 'middle' ? ($(this).width() / 2) - (settings.square / 2) : 0 , y: settings.default == 'middle' ? ($(this).height() / 2) - (settings.square / 2) : 0 };
我们将图像包装在一个容器中，该容器可以设置样式并用作可拖动裁剪器的父容器。
$(this).wrap("");
这（显然）是裁剪者。
var cropper = $("");
将它放在图像之前：
$(this).before(cropper);
创建一个基本保存按钮：
var save = $("");
并将其绑定到服务以接收裁剪的post：
save.click(function () { $.post("/your/service/location", { img: id, x: cropper.position().left, y: cropper.position().top, height: settings.square }, function (data) { if (settings.success != null) { settings.success(data); } } ); }); $(this).parent().width($(this).width()); $(this).parent().height($(this).height()); cropper.draggable({containment: "parent"}); $(this).parent().after(save);
典型的插件声明结束：
}; })(jQuery);
叫它：
$(".croppable").croppable();
最后一点，插件本身只有1.61 KB。 够小吗？
我用imgAreaSelect 。 这是一个很棒的工具，非常简单的输入和输出……
详细说明：
您可以设置宽度，高度并将“resizable”选项设置为false以允许用户选择特定的正方形（尽管通常我会给用户更多的自由并在选择不同大小时裁剪图像 – 仅强制执行宽高比。
当然，这是35Kb，可以缩小到<14kb。 如果你想要它更小，我建议你在缩小它之前去掉一些你不需要的功能。
有很多用于客户端裁剪的jQuery插件（jCrop，imgAreaSelect等）。 也许您会发现以下博客文章很有用。 它描述了在与Javascript库集成时在服务器上实际裁剪的解决方案：
http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries