有没有类似Facebook的图片裁剪的jQuery图片裁剪插件？

Question

我知道有数以千计的jQuery插件用于图片裁剪，但我需要的插件类似于Facebook的图片裁剪:在图片上使用可拖动的固定大小的正方形，或者在固定大小的正方形下使用可拖动的图片。

我认为它有一个简单而优雅的代码，而不是我随处可见的10k-50k图像处理框架。

Answer 1

我刚刚为您构建了一个使用jQuery：http://jsfiddle.net/gCqJ4/的快速示例，它并不太难，您可以在我的示例的基础上进行构建。执照是麻省理工学院的。

这里有一个基本的假设。首先，你的图片应该已经上传了；这只是裁剪部分。其次，该图像有一个data-id属性，该属性指定了服务器可以使用的图像的id。

我将在下面解释一下JS：

第一部分是典型的jQuery插件声明：

(function($) {
    $.fn.croppable = function(settings) {

然后我们使用一个可选的参数设置，并使用一些合理的默认值(success是您的匿名函数，用于处理成功的数据提交)：

        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("<div class='croppable-container' style='position: relative;' />");

这(很明显)就是裁剪者。

        var cropper = $("<div style='position: absolute; top: " + position.y + "px; left: " + position.x + "px; height: " + settings.square + "px; width: " + settings.square + "px;' class='cropper' />");

将其放在图像之前：

        $(this).before(cropper);

创建一个基本的保存按钮：

        var save = $("<input type='button' value='Crop Selection'/>");

并将其绑定到服务以接收用于裁剪的帖子：

        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.61KB。够小吗？

Answer 2

我使用imgAreaSelect。这是一个很棒的工具，非常容易输入和输出……

详述：

您可以设置宽度，高度，并设置“可调整大小”选项为假，以实现允许用户选择一个特定的正方形(虽然通常我给用户更多的自由，当他们选择不同的大小时裁剪图像-仅强制实施纵横比)。

当然，这是35Kb，可以缩小到< 14kb。如果你想让它更小，我建议你在缩小它之前去掉一些不需要的函数。

Answer 3

有很多用于客户端裁剪的jQuery插件(jCrop、imgAreaSelect等)。也许你会发现下面这篇博文很有用。它描述了在与Javascript库集成的同时在服务器上进行实际裁剪的解决方案：

http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries